/* ===========================================================
   SafeView — design tokens (the system)
   Never hardcode a hex value in a component; use these.

   SPACE SCALE — all nine steps exist:
   1=4px 2=8px 3=12px 4=16px 5=24px 6=32px 7=48px 8=64px 9=96px
   (a reference to a custom property that does not exist fails
    silently and collapses the spacing, so every step is defined)
   =========================================================== */

:root {
  /* --- Neutral ramp (blue-tinted slate) ------------------- */
  --n-50:  #F7F9FC;
  --n-100: #EEF2F8;
  --n-200: #DDE4EF;
  --n-300: #C2CEDE;
  --n-400: #94A3B8;
  --n-500: #64748B;
  --n-600: #4A5A70;
  --n-700: #334155;
  --n-800: #1E2C42;
  --n-900: #0F1B2D;
  --n-950: #0A1322;

  /* --- Accent: trust blue --------------------------------- */
  --a-50:  #EFF5FF;
  --a-100: #DCE8FF;
  --a-200: #BFD4FE;
  --a-300: #93B4FB;
  --a-400: #5E8BF5;
  --a-500: #3366EA;
  --a-600: #1E4FD8;
  --a-700: #1E40AF;
  --a-800: #1E3A8A;
  --a-900: #172B63;

  /* --- Accent 2: safety amber (CTAs) ---------------------- */
  --b-50:  #FFF6ED;
  --b-100: #FFEAD5;
  --b-200: #FED0AA;
  --b-300: #FDAE74;
  --b-400: #FB853C;
  --b-500: #EA580C;
  --b-600: #C2410C;  /* white text on this = 5.2:1 */
  --b-700: #9A3412;
  --b-800: #7C2D12;

  --wa-500: #25D366;
  --wa-700: #128C4A;  /* white text on this = 4.6:1 */

  /* --- Semantic ------------------------------------------- */
  --color-bg:            var(--n-50);
  --color-surface:       #FFFFFF;
  --color-surface-alt:   var(--n-50);
  --color-tint:          var(--n-100);
  --color-dark:          var(--n-950);
  --color-dark-2:        var(--n-900);

  --color-text:          var(--n-900);
  --color-muted:         var(--n-600);   /* 7.9:1 on white */
  --color-on-dark:       var(--n-50);
  --color-on-dark-muted: var(--n-300);   /* 11.9:1 on --n-950 */

  --color-border:        var(--n-200);
  --color-border-strong: var(--n-300);
  --color-border-dark:   rgba(255,255,255,.14);

  --color-accent:        var(--a-700);   /* 8.6:1 on white */
  --color-accent-soft:   var(--a-50);
  --color-accent-on-dark:var(--a-300);   /* 9.0:1 on --n-950 */
  --color-cta:           var(--b-600);
  --color-cta-hover:     var(--b-700);
  --color-cta-on-dark:   var(--b-300);
  --color-focus:         var(--a-500);

  /* --- Type ----------------------------------------------- */
  --font-heading: "Lexend", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body:    "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fs-xs:   0.8125rem;   /* 13px — labels only */
  --fs-sm:   0.9375rem;   /* 15px */
  --fs-base: 1.0625rem;   /* 17px — larger base: the buyer set skews older */
  --fs-lg:   1.1875rem;
  --fs-xl:   clamp(1.25rem,  1.12rem + 0.55vw, 1.5rem);
  --fs-2xl:  clamp(1.5rem,   1.28rem + 1.05vw, 2rem);
  --fs-3xl:  clamp(1.875rem, 1.45rem + 2.05vw, 2.75rem);
  --fs-4xl:  clamp(2.125rem, 1.55rem + 3.1vw,  3.6rem);

  --lh-tight: 1.14;
  --lh-snug:  1.3;
  --lh-body:  1.62;

  /* --- Space (see scale above) ---------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --gutter:    clamp(16px, 5vw, 32px);
  --container: 1220px;
  --bar-h:     62px;

  /* --- Radius --------------------------------------------- */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* --- Elevation ------------------------------------------ */
  --shadow-sm:   0 1px 2px rgba(10,19,34,.06), 0 1px 3px rgba(10,19,34,.07);
  --shadow-md:   0 10px 28px -10px rgba(10,19,34,.20), 0 2px 6px rgba(10,19,34,.05);
  --shadow-lg:   0 28px 64px -24px rgba(10,19,34,.32), 0 4px 12px rgba(10,19,34,.06);
  --shadow-cta:  0 14px 30px -12px rgba(194,65,12,.55);
  --shadow-glow: 0 24px 60px -28px rgba(30,79,216,.65);

  /* --- Motion --------------------------------------------- */
  --dur-fast:   160ms;
  --dur:        240ms;
  --dur-slow:   420ms;
  --dur-reveal: 620ms;
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --stagger:    80ms;
}

@media (min-width: 1024px) {
  :root { --bar-h: 76px; }
}