/* Educircle Website V2 — Design Tokens
   Single source of truth for the V2 preview. Brand palette carried from the live
   site (:root in home_new/css/style.css), refined for an editorial, premium feel.
   No generic AI gradients — brand blue/navy + green + a restrained yellow highlight. */

/* Metrics-matched fallback so the fallback font occupies the same space as
   Montserrat — eliminates the swap reflow (CLS) on the large hero headline. */
@font-face {
  font-family: 'Montserrat-fallback';
  src: local('Arial');
  ascent-override: 91.84%;
  descent-override: 23.80%;
  line-gap-override: 0%;
  size-adjust: 112.16%;
}

:root {
  /* ---- Color: brand ---- */
  --c-primary: #004AAD;      /* deep brand blue — primary actions */
  --c-primary-600: #003B8E;
  --c-primary-700: #012A64;
  --c-navy: #022C54;         /* ink navy — dark sections */
  --c-navy-900: #041F3D;
  --c-ink-blue: #002244;
  --c-vibrant: #0081FA;      /* accent blue — links, focus */
  --c-green: #70A344;        /* accent green — text/ticks/large accents */
  --c-green-600: #5E8A39;
  --c-green-btn: #4C7A2B;    /* deeper green for FILLED buttons — white text hits 5.1:1 (WCAG AA) */
  --c-green-btn-hover: #3F6B24;
  --c-yellow: #FFBD00;       /* highlight — use sparingly */

  /* ---- Color: neutrals / surfaces ---- */
  --c-ink: #0E1B2A;          /* body text on light */
  --c-muted: #5B6B7C;        /* secondary text */
  --c-line: #E4EBF3;         /* hairlines, borders */
  --c-surface: #FFFFFF;
  --c-surface-2: #F5F8FC;    /* page / alt sections */
  --c-surface-3: #EAF1FA;
  --c-on-dark: #EAF2FF;      /* text on navy */
  --c-on-dark-muted: #9DB4D0;

  /* ---- Gradients (brand, subtle — never rainbow) ---- */
  --grad-navy: linear-gradient(180deg, #022C54 0%, #041F3D 100%);
  --grad-primary: linear-gradient(135deg, #004AAD 0%, #0081FA 100%);
  --grad-sage: linear-gradient(135deg, #015469 0%, #0DCAD2 100%); /* Sage teal, from brand */

  /* ---- Typography ---- */
  --font-sans: 'Montserrat', 'Montserrat-fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Fluid type scale (mobile → desktop) */
  --fs-eyebrow: 0.8125rem;                              /* 13px labels */
  --fs-small: 0.875rem;                                 /* 14px */
  --fs-body: 1rem;                                      /* 16px */
  --fs-body-lg: clamp(1.0625rem, 0.6vw + 0.95rem, 1.1875rem);
  --fs-h4: clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
  --fs-h3: clamp(1.375rem, 1.1vw + 1.1rem, 1.875rem);
  --fs-h2: clamp(1.875rem, 2.4vw + 1.2rem, 3rem);       /* section titles */
  --fs-h1: clamp(2.15rem, 4.6vw + 1rem, 4.5rem);        /* hero — min fits 390px without overflow */
  --lh-tight: 1.06;
  --lh-snug: 1.2;
  --lh-body: 1.6;
  --ls-tight: -0.02em;
  --ls-eyebrow: 0.14em;

  /* ---- Spacing scale (4px base) ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 2.5rem;  --sp-8: 3rem;
  --sp-10: 4rem;    --sp-12: 5rem;   --sp-16: 7rem;   --sp-20: 9rem;
  /* Section rhythm (fluid) */
  --section-y: clamp(3.5rem, 6vw, 7.5rem);

  /* ---- Grid / layout ---- */
  --container: 1200px;
  --container-wide: 1320px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Radius ---- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px;
  --r-pill: 999px;

  /* ---- Shadows (soft, brand-tinted — no harsh drop shadows) ---- */
  --sh-xs: 0 1px 2px rgba(2, 44, 84, 0.06);
  --sh-sm: 0 4px 14px rgba(2, 44, 84, 0.07);
  --sh-md: 0 12px 30px rgba(2, 44, 84, 0.10);
  --sh-lg: 0 26px 60px rgba(2, 44, 84, 0.14);
  --sh-focus: 0 0 0 3px rgba(0, 129, 250, 0.45);

  /* ---- Motion ---- */
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;
  --dur-cinematic: 900ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);      /* expo-out — confident settle */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Z-index ---- */
  --z-header: 100; --z-overlay: 200; --z-modal: 300;
}

/* Responsive breakpoints (reference — used in media queries):
   sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1440 */