/* ============================================================================
   HOW TO SPEAK SERIES — DESIGN TOKENS  (swappable sheet)
   ----------------------------------------------------------------------------
   Palette: "Shield Wall / Field Manual" — PROPOSED v0.1, AA-checked.
   To rebrand, change values here only. Nothing else references raw hex.

   Register: disciplined, authoritative, not soft. Defense motif. Premium.
   NOT literal military / camo.
   ============================================================================ */

:root {
  /* --- Core palette ------------------------------------------------------ */
  --ink:        #12161D;   /* primary dark ground + body text on light      */
  --ink-2:      #1A2029;   /* raised dark surface (cards on dark)           */
  --ink-3:      #232C37;   /* hairlines / borders on dark                   */

  --steel:      #5C6B7A;   /* structure, secondary lines, icons             */
  --steel-2:    #3A4654;   /* darker steel for borders on light             */

  --ember:      #C8772E;   /* primary accent / CTA                          */
  --ember-2:    #B0651F;   /* CTA hover / pressed                           */

  --bone:       #ECE7DD;   /* light surface — "manual paper"                */
  --bone-2:     #F5F1E9;   /* lighter paper (raised cards on light)         */

  --signal:     #E6533A;   /* alert / emphasis — use sparingly              */

  /* --- Text roles (chosen for WCAG AA against their grounds) ------------- */
  --text-on-ink:        var(--bone);     /* ~13:1 on --ink                  */
  --muted-on-ink:       #9AA7B2;          /* ~7:1 on --ink                   */
  --text-on-bone:       var(--ink);       /* ~14:1 on --bone                 */
  --muted-on-bone:      #5A5247;          /* ~6:1 on --bone                  */

  /* --- Semantic surface defaults ---------------------------------------- */
  --bg:            var(--ink);
  --surface:       var(--ink-2);
  --border:        var(--ink-3);
  --text:          var(--text-on-ink);
  --text-muted:    var(--muted-on-ink);
  --accent:        var(--ember);
  --accent-hover:  var(--ember-2);
  --focus-ring:    var(--ember);

  /* --- Type -------------------------------------------------------------- */
  /* System stacks only — no external fonts (fast, CSP-safe, Lighthouse-clean).
     Display = heavy weight + tight tracking. Mono = field-manual texture
     for kickers, section indices, tags. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  --fs-kicker:  0.78rem;                              /* mono labels         */
  --fs-small:   0.92rem;
  --fs-body:    1.06rem;
  --fs-lead:    clamp(1.15rem, 0.9rem + 1.1vw, 1.4rem);
  --fs-h3:      clamp(1.3rem, 1.0rem + 1.2vw, 1.7rem);
  --fs-h2:      clamp(1.8rem, 1.3rem + 2.4vw, 2.9rem);
  --fs-h1:      clamp(2.5rem, 1.6rem + 4.6vw, 4.6rem);

  --lh-tight:   1.06;
  --lh-snug:    1.28;
  --lh-body:    1.62;

  --track-kicker: 0.18em;   /* uppercase letter-spacing for mono kickers     */
  --track-tight: -0.02em;   /* display headlines                             */

  /* --- Space scale ------------------------------------------------------- */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;    --s-7: 3rem;      --s-8: 4.5rem;
  --s-9: 7rem;

  --maxw:        1180px;   /* outer container                                */
  --maxw-prose:  68ch;     /* readable measure for long copy                 */

  /* --- Radius / borders / shadow ---------------------------------------- */
  --radius:     4px;       /* tight, structural — not pill-soft              */
  --radius-lg:  8px;
  --hair:       1px;
  --shadow:     0 1px 0 rgba(0,0,0,0.04), 0 8px 30px rgba(18,22,29,0.10);
  --shadow-dark:0 1px 0 rgba(255,255,255,0.02), 0 18px 50px rgba(0,0,0,0.45);

  /* --- Motion ------------------------------------------------------------ */
  --ease:   cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur:    180ms;
}

/* Respect reduced-motion globally */
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}