/* ==========================================================================
   WFS Design System — Tokens
   Single source of truth for color, type, space, motion, radius, shadow.
   All component CSS must reference these via var(--*).
   ========================================================================== */

:root {
  /* --- Brand: navy ink, brand orange (lifted from logo), cream warm-neutral --- */
  --wfs-navy-50:  #F4F6FA;
  --wfs-navy-100: #E2E8F2;
  --wfs-navy-200: #BCC8DA;
  --wfs-navy-300: #8B9CB8;
  --wfs-navy-400: #4F6889;
  --wfs-navy-500: #1F3A5F;
  --wfs-navy-600: #143057;   /* hover ink */
  --wfs-navy-700: #0B2A4A;   /* PRIMARY anchor */
  --wfs-navy-800: #07203C;
  --wfs-navy-900: #051630;

  --wfs-orange-50:  #FCF2E8;
  --wfs-orange-100: #F7DEC2;
  --wfs-orange-300: #EFA968;
  --wfs-orange-500: #E07A2C;  /* brand orange (logo) */
  --wfs-orange-600: #C7651C;
  --wfs-orange-700: #A2500F;

  --wfs-cream-50:  #FBF8F0;
  --wfs-cream-100: #F5EFE0;   /* warm canvas */
  --wfs-cream-200: #ECE3CD;
  --wfs-cream-300: #DFD2AE;

  --wfs-ink-900: #0B0F18;
  --wfs-ink-700: #1B2230;
  --wfs-ink-500: #3E4A5E;
  --wfs-ink-300: #6A7689;
  --wfs-ink-200: #97A2B5;
  --wfs-ink-100: #C8CFDB;

  --wfs-paper:   #FFFFFF;
  --wfs-paper-2: #F8F9FC;
  --wfs-line:    #E5E8F0;
  --wfs-line-2:  #D7DCE7;

  --wfs-success: #1F7A4A;
  --wfs-warning: #B4761F;
  --wfs-danger:  #B3361F;

  /* --- Semantic role aliases (USE THESE in components) --- */
  --c-bg:           var(--wfs-paper);
  --c-bg-soft:      var(--wfs-paper-2);
  --c-bg-warm:      var(--wfs-cream-50);
  --c-bg-warm-2:    var(--wfs-cream-100);
  --c-bg-ink:       var(--wfs-navy-700);
  --c-bg-ink-deep:  var(--wfs-navy-900);

  --c-fg:           var(--wfs-ink-900);
  --c-fg-soft:      var(--wfs-ink-500);
  --c-fg-muted:     var(--wfs-ink-300);
  --c-fg-on-ink:    var(--wfs-cream-100);
  --c-fg-on-ink-soft: var(--wfs-navy-200);

  --c-line:         var(--wfs-line);
  --c-line-strong:  var(--wfs-line-2);
  --c-line-on-ink:  rgba(245, 239, 224, 0.16);

  --c-brand:        var(--wfs-navy-700);
  --c-accent:       var(--wfs-orange-500);
  --c-accent-hover: var(--wfs-orange-600);
  --c-accent-soft:  var(--wfs-orange-50);

  /* --- Typography --- */
  --font-display: "Newsreader", "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-sans:    "Geist", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "Geist Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale (clamp = fluid). Display sizes use --font-display. */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-17: 1.0625rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;

  --fs-h6: clamp(1rem,    .95rem + .25vw, 1.125rem);
  --fs-h5: clamp(1.125rem, 1.05rem + .35vw, 1.375rem);
  --fs-h4: clamp(1.375rem, 1.2rem + .8vw,  1.875rem);
  --fs-h3: clamp(1.75rem,  1.45rem + 1.4vw, 2.5rem);
  --fs-h2: clamp(2.25rem,  1.7rem + 2.6vw, 3.5rem);
  --fs-h1: clamp(2.75rem,  2rem + 3.6vw,   4.5rem);
  --fs-display: clamp(3.25rem, 2.2rem + 4.8vw, 5.75rem);

  --lh-tight:  1.08;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-relaxed: 1.6;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-eyebrow: 0.14em;

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

  /* --- Spacing (8px base + half steps) --- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  40px;
  --s-9:  48px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --s-13: 128px;
  --s-14: 160px;

  /* Section vertical rhythm — adapts with density tweak */
  --section-y: clamp(64px, 6vw, 112px);
  --section-y-tight: clamp(48px, 4.5vw, 80px);

  /* --- Radius --- */
  --r-1:  4px;
  --r-2:  8px;
  --r-3:  12px;
  --r-4:  16px;
  --r-5:  24px;
  --r-pill: 999px;

  /* --- Shadow (low key — never bloom; this is fintech, not SaaS toy) --- */
  --shadow-1: 0 1px 0 rgba(11, 42, 74, 0.05), 0 1px 2px rgba(11, 42, 74, 0.04);
  --shadow-2: 0 2px 4px rgba(11, 42, 74, 0.06), 0 8px 24px -10px rgba(11, 42, 74, 0.10);
  --shadow-3: 0 4px 8px rgba(11, 42, 74, 0.08), 0 18px 40px -16px rgba(11, 42, 74, 0.16);
  --shadow-inset: inset 0 0 0 1px var(--c-line);
  --shadow-focus: 0 0 0 4px rgba(224, 122, 44, 0.28);

  /* --- Motion --- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;

  /* --- Layout --- */
  --container-narrow: 880px;
  --container-base:   1180px;
  --container-wide:   1320px;

  /* --- Z-index --- */
  --z-nav: 100;
  --z-overlay: 500;
  --z-tweaks: 950;
  --z-modal: 1000;
}

/* Density tweak (compact / comfortable / spacious) — adjusts vertical rhythm only */
:root[data-density="compact"] {
  --section-y: clamp(48px, 4.5vw, 80px);
  --section-y-tight: clamp(32px, 3vw, 56px);
}
:root[data-density="spacious"] {
  --section-y: clamp(88px, 8vw, 160px);
  --section-y-tight: clamp(64px, 6vw, 112px);
}

/* Theme switch (color anchor tweak) */
:root[data-theme="forest"] {
  --wfs-navy-700: #0E3A2F;
  --wfs-navy-600: #15523F;
  --wfs-navy-800: #0A2B22;
  --wfs-navy-900: #061B16;
  --wfs-navy-200: #BDD3C9;
}
:root[data-theme="charcoal"] {
  --wfs-navy-700: #1B1F2A;
  --wfs-navy-600: #2A3040;
  --wfs-navy-800: #131620;
  --wfs-navy-900: #0B0E15;
  --wfs-navy-200: #C4C9D6;
}