/* =====================================================
   INFRACORE DESIGN SYSTEM
   ROOT VARIABLES & GLOBAL FOUNDATION
===================================================== */

:root {

  /* ================= BRAND COLORS ================= */

  --primary: #0b2d72;        /* Deep Corporate Blue */
  --secondary: #d35400;      /* Strong Orange */
  --accent: #6c5ce7;         /* Royal Indigo (Suggested Third Color) */

  /* ================= GRADIENTS ================= */

  --gradient-primary: linear-gradient(135deg, var(--primary), var(--accent));
  --gradient-secondary: linear-gradient(135deg, var(--secondary), var(--accent));
  --gradient-hero: linear-gradient(90deg, var(--primary), var(--accent));

  /* ================= NEUTRAL COLORS ================= */

  --dark: #0f172a;
  --dark-soft: #1e293b;
  --light: #f8fafc;
  --gray: #94a3b8;
  --gray-light: #cbd5e1;

  /* ================= TEXT COLORS ================= */

  --text-primary: #ffffff;
  --text-secondary: #cbd5e1;
  --text-muted: #94a3b8;

  /* ================= BACKGROUNDS ================= */

  --bg-main: #0b0f1a;
  --bg-card: rgba(255,255,255,0.05);
  --bg-glass: rgba(255,255,255,0.08);

  /* ================= BORDERS ================= */

  --border-light: rgba(255,255,255,0.1);
  --border-strong: rgba(255,255,255,0.2);

  /* ================= SHADOWS ================= */

  --shadow-soft: 0 10px 30px rgba(0,0,0,0.25);
  --shadow-medium: 0 15px 40px rgba(0,0,0,0.35);
  --shadow-glow-primary: 0 0 25px rgba(11,45,114,0.4);
  --shadow-glow-secondary: 0 0 25px rgba(211,84,0,0.4);

  /* ================= GLASS EFFECT ================= */

  --glass-blur: blur(20px);
  --glass-border: 1px solid var(--border-light);

  /* ================= TYPOGRAPHY ================= */

  --font-family: "Inter", "Segoe UI", sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.5rem;
  --fs-3xl: 3.5rem;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ================= SPACING SYSTEM ================= */

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 60px;
  --space-3xl: 100px;

  /* ================= RADIUS ================= */

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --radius-pill: 50px;

  /* ================= TRANSITIONS ================= */

  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ================= Z-INDEX ================= */

  --z-header: 1000;
  --z-dropdown: 1100;
  --z-modal: 2000;

}


/* =====================================================
   GLOBAL RESET & BASE STYLES
===================================================== */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  background: var(--bg-main);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}


/* =====================================================
   UTILITY CLASSES (Reusable Across Project)
===================================================== */

/* Glass Card */
.glass {
  background: var(--bg-glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

/* Gradient Text */
.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Primary Button */
.btn-primary {
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 10px 24px;
  transition: var(--transition-normal);
}

.btn-primary:hover {
  box-shadow: var(--shadow-glow-primary);
}

/* Secondary Button */
.btn-secondary {
  background: var(--secondary);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 10px 24px;
  transition: var(--transition-normal);
}

.btn-secondary:hover {
  box-shadow: var(--shadow-glow-secondary);
}