/* ============================================================
   TACSOP — Design Tokens
   Source of truth: tacsop-site-visual-system-v1.3.md §3–§5
   ============================================================ */

:root {
  /* --- 3.1 Brand neutrals (paper and ink) --- */
  --paper:           #F1EFE8;
  --paper-raised:    #FFFFFF;
  --ink:             #2C2C2A;
  --ink-muted:       #5A5A55;
  --ink-faint:       #8B8B83;
  --rule:            #D3D1C7;
  --rule-strong:     #2C2C2A;
  --ink-dark-surface:#2C2C2A;

  /* --- 3.2 Brand primary & accent --- */
  --navy:            #1B3F7A;
  --navy-hover:      #143063;
  --blue:            #93C5FD;
  --blue-faint:      #EAF2FD;

  /* --- 3.3 Editorial accent (warnings only) --- */
  --warning:         #7A4F26;
  --warning-faint:   #EFE6D6;

  /* --- 4 Typography --- */
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Type scale (desktop). See §4.2. */
  --text-display:  3.5rem;     /* 56 / mono 500 */
  --text-h1:       2.75rem;    /* 44 / mono 500 */
  --text-h2:       2rem;       /* 32 / mono 500 */
  --text-h3:       1.5rem;     /* 24 / sans 600 */
  --text-h4:       1.1875rem;  /* 19 / sans 600 */
  --text-body-lg:  1.1875rem;  /* 19 / sans 400 */
  --text-body:     1.0625rem;  /* 17 / sans 400 */
  --text-body-sm:  0.9375rem;  /* 15 / sans 400 */
  --text-pull:     1.3125rem;  /* 21 / mono 400 */
  --text-label:    0.8125rem;  /* 13 / mono 500 */
  --text-micro:    0.75rem;    /* 12 / mono 400 */
  --text-tagline:  1.25rem;    /* 20 / sans 400 */

  /* Leading */
  --lh-display: 1.05;
  --lh-h1:      1.1;
  --lh-h2:      1.15;
  --lh-h3:      1.2;
  --lh-h4:      1.3;
  --lh-prose:   1.6;
  --lh-pull:    1.5;

  /* --- 5.1 Spacing scale --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- 5.2 Layout grid --- */
  --max-content: 1200px;
  --max-prose:   680px;
  --max-wide:    1000px;
  --max-hero:    900px;
  --gutter:      24px;

  /* --- Misc --- */
  --radius:     4px;
  --rule-w:     1px;
  --nav-h:      88px;
  --focus:      2px solid var(--navy);
  --t-fast:     150ms ease;
}

/* Mobile type step-down. §4.2 */
@media (max-width: 767px) {
  :root {
    --text-display: 2.375rem;  /* 38 */
    --text-h1:      1.875rem;  /* 30 */
    --text-h2:      1.5rem;    /* 24 */
    --text-pull:    1.0625rem; /* 17 */
    --gutter:       16px;
  }
}