/* ============================================================
   VARIABLES.CSS — Core Design Tokens
   College Admission Consultant Website
   ============================================================ */

:root {

  /* ──────────────────────────────────────────
     PRIMARY BRAND COLORS
  ────────────────────────────────────────── */
  --clr-primary-50:  #eef2ff;
  --clr-primary-100: #e0e7ff;
  --clr-primary-200: #c7d2fe;
  --clr-primary-300: #a5b4fc;
  --clr-primary-400: #818cf8;
  --clr-primary-500: #6366f1;   /* Main Brand Indigo */
  --clr-primary-600: #4f46e5;
  --clr-primary-700: #4338ca;
  --clr-primary-800: #3730a3;
  --clr-primary-900: #312e81;

  /* ──────────────────────────────────────────
     ACCENT COLORS
  ────────────────────────────────────────── */
  --clr-accent-400: #fb923c;    /* Warm Orange accent */
  --clr-accent-500: #f97316;
  --clr-accent-600: #ea580c;

  --clr-gold-400:   #fbbf24;    /* Gold highlight */
  --clr-gold-500:   #f59e0b;

  /* ──────────────────────────────────────────
     NEUTRAL / DARK PALETTE (Dark Mode Base)
  ────────────────────────────────────────── */
  --clr-dark-950:  #060614;     /* Deepest background */
  --clr-dark-900:  #0d0d2b;     /* Hero bg */
  --clr-dark-800:  #13133a;     /* Card bg */
  --clr-dark-700:  #1a1a4e;     /* Section bg */
  --clr-dark-600:  #252566;
  --clr-dark-500:  #3b3b8f;

  --clr-surface-1: #0f0f2e;     /* Main surface */
  --clr-surface-2: #161637;     /* Elevated card */
  --clr-surface-3: #1e1e50;     /* Modal / popup */

  /* ──────────────────────────────────────────
     TEXT COLORS
  ────────────────────────────────────────── */
  --clr-text-primary:   #f0f0ff;  /* Near-white for headings */
  --clr-text-secondary: #b0b0d8;  /* Muted text */
  --clr-text-muted:     #7070a0;  /* Placeholder, meta */
  --clr-text-inverse:   #0d0d2b;  /* Dark text on light bg */

  /* ──────────────────────────────────────────
     SEMANTIC COLORS
  ────────────────────────────────────────── */
  --clr-success:  #10b981;
  --clr-warning:  #f59e0b;
  --clr-error:    #ef4444;
  --clr-info:     #3b82f6;

  /* ──────────────────────────────────────────
     GRADIENTS
  ────────────────────────────────────────── */
  --gradient-hero: linear-gradient(
    135deg,
    #060614 0%,
    #0d0d2b 40%,
    #1a1a4e 70%,
    #0d0d2b 100%
  );

  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  --gradient-accent:  linear-gradient(135deg, #f97316 0%, #fbbf24 100%);
  --gradient-card:    linear-gradient(145deg, #161637 0%, #1e1e50 100%);
  --gradient-glow:    radial-gradient(ellipse at center, rgba(99,102,241,0.3) 0%, transparent 70%);
  --gradient-cta:     linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);

  /* ──────────────────────────────────────────
     TYPOGRAPHY
  ────────────────────────────────────────── */
  --font-heading: 'Outfit', 'Inter', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'Fira Code', 'Courier New', monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */

  --font-light:    300;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-extrabold:800;
  --font-black:    900;

  --leading-tight:  1.2;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;
  --leading-loose:  2;

  /* ──────────────────────────────────────────
     SPACING
  ────────────────────────────────────────── */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ──────────────────────────────────────────
     BORDER RADIUS
  ────────────────────────────────────────── */
  --radius-sm:   0.375rem;   /* 6px  */
  --radius-md:   0.625rem;   /* 10px */
  --radius-lg:   1rem;       /* 16px */
  --radius-xl:   1.5rem;     /* 24px */
  --radius-2xl:  2rem;       /* 32px */
  --radius-full: 9999px;     /* Pill */

  /* ──────────────────────────────────────────
     SHADOWS & GLOWS
  ────────────────────────────────────────── */
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:   0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl:   0 16px 60px rgba(0, 0, 0, 0.6);

  --glow-primary: 0 0 30px rgba(99, 102, 241, 0.4);
  --glow-accent:  0 0 30px rgba(249, 115, 22, 0.4);
  --glow-gold:    0 0 30px rgba(251, 191, 36, 0.4);

  /* ──────────────────────────────────────────
     BORDERS
  ────────────────────────────────────────── */
  --border-subtle: 1px solid rgba(255, 255, 255, 0.06);
  --border-light:  1px solid rgba(255, 255, 255, 0.12);
  --border-medium: 1px solid rgba(255, 255, 255, 0.2);
  --border-primary:1px solid rgba(99, 102, 241, 0.35);
  --border-accent: 1px solid rgba(249, 115, 22, 0.4);

  /* ──────────────────────────────────────────
     TRANSITIONS
  ────────────────────────────────────────── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ──────────────────────────────────────────
     Z-INDEX LAYERS
  ────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-navbar:  500;
  --z-modal:   1000;
  --z-toast:   2000;
  --z-tooltip: 3000;

  /* ──────────────────────────────────────────
     LAYOUT
  ────────────────────────────────────────── */
  --container-max:  1280px;
  --container-wide: 1440px;
  --navbar-height:  72px;
  --section-padding-y: var(--space-20);

  /* ──────────────────────────────────────────
     GLASSMORPHISM
  ────────────────────────────────────────── */
  --glass-bg:     rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-blur:   blur(16px);
}