/* ═══════════════════════════════════════════════════════════════
   ROOT — Design Tokens
   ─────────────────────────────────────────────────────────────
   Typography scale: clamp(min, preferred-vw, max)
   Viewport breakpoints:  mobile 375px  →  desktop 1440px
═══════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand Palette ── */
  --navy: #0a1a5e;
  --navy-2: #0d2a8a;
  --navy-3: #1437c4;
  --blue: #1e4dff;
  --blue-2: #3b6cff;
  --ink: #0b1230;
  --text: #3b4566;
  --muted: #6b7390;
  --bg: #ffffff;
  --soft: #f3f5fb;
  --line: #e6e9f4;
  --second : #FEDF01;
  --sec-col: #080d1f;

  /* ── Gradients ── */
  --grad-hero: linear-gradient(135deg, var(--navy) 0%, var(--navy-3) 100%);
  --grad-blue: linear-gradient(135deg, var(--blue) 0%, var(--navy-3) 100%);
  --grad-soft: linear-gradient(135deg, var(--soft) 0%, #eef1fc 100%);

  /* ── Radius ── */
  --radius-xs: 8px;
  --radius: 14px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs: 0 2px 8px rgba(20, 40, 120, 0.05);
  --shadow-sm: 0 6px 18px rgba(20, 40, 120, 0.06);
  --shadow: 0 18px 50px rgba(15, 30, 90, 0.1);
  --shadow-lg: 0 30px 80px rgba(10, 25, 90, 0.18);
  --shadow-xl: 0 48px 100px rgba(10, 25, 90, 0.24);

  /* ── Transitions ── */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.18s var(--ease);
  --t-base: 0.28s var(--ease);
  --t-slow: 0.45s var(--ease);

  /* ══════════════════════════════════════════
     FLUID TYPOGRAPHY SYSTEM
     Formula: clamp(min, [base + fluid], max)
     fluid = calc(base-in-rem + delta * 1vw)
     Tested across 375px → 1440px
  ══════════════════════════════════════════ */

  /* ── Micro / UI Labels ── */
  --text-2xs: clamp(0.65rem, 0.6rem + 0.22vw, 0.75rem); /* 10.4 → 12px  */
  --text-xs: clamp(0.75rem, 0.7rem + 0.27vw, 0.875rem); /* 12   → 14px  */
  --text-sm: clamp(0.875rem, 0.82rem + 0.3vw, 1rem); /* 14   → 16px  */

  /* ── Body ── */
  --text-base: clamp(1rem, 0.94rem + 0.33vw, 1.125rem); /* 16   → 18px  */
  --text-md: clamp(1.063rem, 0.98rem + 0.45vw, 1.25rem); /* 17   → 20px  */

  /* ── Subheadings ── */
  --text-lg: clamp(1.125rem, 0.98rem + 0.78vw, 1.5rem); /* 18   → 24px  */
  --text-xl: clamp(1.25rem, 1.02rem + 1.22vw, 1.875rem); /* 20   → 30px  */
  --text-2xl: clamp(1.5rem, 1.16rem + 1.78vw, 2.375rem); /* 24   → 38px  */

  /* ── Display Headings ── */
  --text-3xl: clamp(1.375rem, 1.05rem + 1.4vw, 2rem);
  --text-4xl: clamp(1.625rem, 1.15rem + 2vw, 2.75rem);
  --text-5xl: clamp(1.875rem, 1.2rem + 2.8vw, 3.25rem);

  /* Semantic heading scale (375px -> 1440px) */
  --heading-h1: clamp(1.625rem, 1.15rem + 2.2vw, 3rem);
  --heading-h2: clamp(1.375rem, 1.05rem + 1.5vw, 2.25rem);
  --heading-h3: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --heading-h4: clamp(1.125rem, 0.98rem + 0.65vw, 1.4375rem);
  --heading-h5: clamp(1rem, 0.92rem + 0.4vw, 1.25rem);
  --heading-h6: clamp(0.9375rem, 0.88rem + 0.28vw, 1.125rem);
  --heading-hero: clamp(1.75rem, 1rem + 3.2vw, 3.5rem);
  --heading-page: clamp(1.5rem, 0.95rem + 2.4vw, 2.75rem);
  --heading-section: clamp(1.375rem, 1rem + 1.6vw, 2.125rem);
  --heading-card: clamp(1.0625rem, 0.95rem + 0.55vw, 1.3125rem);

  /* ── Line Heights ── */
  --lh-none: 1;
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;
  --lh-loose: 2;

  /* ── Letter Spacing ── */
  --ls-tight: -0.03em;
  --ls-normal: -0.02em;
  --ls-wide: 0.04em;
  --ls-wider: 0.1em;
  --ls-widest: 0.18em;

  /* ── Spacing Scale (fluid) ── */
  --sp-1: clamp(0.25rem, 0.2rem + 0.22vw, 0.375rem);
  --sp-2: clamp(0.5rem, 0.42rem + 0.33vw, 0.625rem);
  --sp-3: clamp(0.75rem, 0.64rem + 0.44vw, 0.875rem);
  --sp-4: clamp(1rem, 0.84rem + 0.67vw, 1.25rem);
  --sp-5: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --sp-6: clamp(1.5rem, 1.2rem + 1.33vw, 2.25rem);
  --sp-8: clamp(2rem, 1.5rem + 2vw, 3.25rem);
  --sp-10: clamp(2.5rem, 1.8rem + 2.78vw, 4.5rem);
  --sp-12: clamp(3rem, 2rem + 3.78vw, 6rem);
  --sp-16: clamp(4rem, 2.5rem + 5.56vw, 8rem);
  --sp-20: clamp(5rem, 3rem + 7vw, 10rem);
}