/* =========================================================
   NASDAN DESIGN TOKENS — v2
   Stripe-calibrated typography, spacing & proportion system,
   reinterpreted with the NASDAN brand palette.
   ========================================================= */

:root {
  /* ---- Brand colors ---- */
  --nasdan-navy: #0B163F;
  --nasdan-navy-800: #101c4c;
  --nasdan-navy-700: #16224f;
  --nasdan-navy-600: #263572;
  --nasdan-amber: #FFC107;
  --nasdan-amber-600: #E8AD00;
  --nasdan-amber-700: #C6920A;
  --nasdan-amber-100: #FFF3CD;
  --white: #FFFFFF;
  --cloud: #F5F6FA;
  --cloud-200: #EEF0F6;
  --cloud-300: #E3E6F0;

  /* ---- Neutral text scale (navy-tinted grays, not pure black) ---- */
  --ink-900: #0B163F;
  --ink-700: #464B68;
  --ink-500: #6B7094;
  --ink-400: #9297B3;
  --ink-200: #DBDEEA;
  --ink-100: #EBEDF4;

  --paper-100: #FFFFFF;
  --paper-300: rgba(255,255,255,0.80);
  --paper-500: rgba(255,255,255,0.58);
  --paper-border: rgba(255,255,255,0.14);

  --surface-page: var(--white);
  --surface-muted: var(--cloud);
  --surface-inverse: var(--nasdan-navy);

  /* ---- Typography ----
     Stripe pairs a light display weight (300) with tight tracking
     for headlines, and a regular 400 weight for everything read
     at length. Nav/labels sit a notch smaller than body text. */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.75rem, 2rem + 3.4vw, 4.75rem);
  --fs-h1:      clamp(2.25rem, 1.8rem + 1.9vw, 3.25rem);
  --fs-h2:      clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
  --fs-h3:      clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-h4:      1.125rem;
  --fs-lead:    clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body:    1rem;
  --fs-body-sm: 0.9125rem;
  --fs-nav:     0.92rem;
  --fs-label:   0.8rem;
  --fs-caption: 0.8125rem;
  --fs-stat:    clamp(2rem, 1.6rem + 1.6vw, 3.25rem);

  --lh-tight: 1.12;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  --ls-tight: -0.02em;
  --ls-snug: -0.012em;
  --ls-normal: 0;
  --ls-wide: 0.03em;
  --ls-wider: 0.08em;

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

  /* ---- 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: 3rem;
  --sp-8: 4rem;
  --sp-9: 5rem;
  --sp-10: 7rem;

  --section-pad-y: 5rem;          /* Stripe's ~80px section rhythm */
  --section-pad-y-lg: 6.5rem;

  /* ---- Layout ---- */
  --container-max: 1320px;
  --container-pad: clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;

  /* ---- Shadows (used sparingly, Stripe-style soft diffuse) ---- */
  --shadow-xs: 0 1px 2px rgba(11, 22, 63, 0.05);
  --shadow-sm: 0 2px 10px rgba(11, 22, 63, 0.06);
  --shadow-md: 0 12px 28px rgba(11, 22, 63, 0.10);
  --shadow-lg: 0 28px 48px -12px rgba(11, 22, 63, 0.16);
  --shadow-focus: 0 0 0 3px rgba(255, 193, 7, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}