/* ─────────────────────────────────────────────────────────────
   La Warroom — Design Tokens
   "Strategy : Studies : Information Warfare"
   ─────────────────────────────────────────────────────────────
   Font-face declarations are in index.html <style> to keep
   asset paths relative to the HTML entry point.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── BRAND CORE ───────────────────────────────────────────── */
  --lwr-rouge:        #E60050;
  --lwr-bordeaux:     #5A1B2A;
  --lwr-noir:         #142326;
  --lwr-noir-site:    #0F1E22;
  --lwr-gris:         #A4ACB1;
  --lwr-blanc:        #FFFFFF;

  /* ── ROUGE SCALE ──────────────────────────────────────────── */
  --rouge-50:         #FFE7EE;
  --rouge-100:        #FFC2D5;
  --rouge-300:        #FF6F9C;
  --rouge-500:        #E60050;
  --rouge-700:        #B30040;
  --rouge-900:        #6E0027;

  /* ── BORDEAUX SCALE ───────────────────────────────────────── */
  --bordeaux-300:     #8B3145;
  --bordeaux-500:     #5A1B2A;
  --bordeaux-700:     #3E1119;

  /* ── NOIR SCALE ───────────────────────────────────────────── */
  --noir-50:          #F4F6F7;
  --noir-100:         #E2E6E8;
  --noir-200:         #C5CCD0;
  --noir-300:         #8C969B;
  --noir-500:         #3A4A4F;
  --noir-700:         #213035;
  --noir-900:         #142326;
  --noir-1000:        #0A1416;

  /* ── GRIS SCALE ───────────────────────────────────────────── */
  --gris-50:          #F2F4F5;
  --gris-100:         #E1E4E6;
  --gris-300:         #C0C6CA;
  --gris-500:         #A4ACB1;
  --gris-700:         #74797C;

  /* ── SEMANTIC ROLES (light theme) ─────────────────────────── */
  --bg-page:          var(--lwr-blanc);
  --bg-elevated:      var(--noir-50);
  --bg-inverse:       var(--lwr-noir);
  --bg-strike:        var(--lwr-rouge);

  --fg-1:             var(--lwr-noir);
  --fg-2:             var(--noir-700);
  --fg-3:             var(--gris-700);
  --fg-mute:          var(--gris-500);
  --fg-on-noir:       var(--lwr-blanc);
  --fg-on-rouge:      var(--lwr-blanc);
  --fg-accent:        var(--lwr-rouge);

  --rule-1:           rgba(20, 35, 38, 0.12);
  --rule-2:           rgba(20, 35, 38, 0.28);
  --rule-strike:      var(--lwr-rouge);

  --focus-ring:       0 0 0 2px var(--lwr-blanc), 0 0 0 4px var(--lwr-rouge);

  /* ── TYPE ─────────────────────────────────────────────────── */
  --font-display:     "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-body:        "Space Grotesk", -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono:        "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-display-xl:    clamp(64px, 9vw, 144px);
  --fs-display-l:     clamp(48px, 6vw, 88px);
  --fs-display-m:     clamp(36px, 4.5vw, 56px);
  --fs-h1:            44px;
  --fs-h2:            32px;
  --fs-h3:            22px;
  --fs-h4:            18px;
  --fs-body:          16px;
  --fs-body-l:        18px;
  --fs-small:         14px;
  --fs-eyebrow:       12px;
  --fs-micro:         11px;

  --lh-tight:         1.05;
  --lh-display:       1.0;
  --lh-heading:       1.15;
  --lh-body:          1.5;
  --lh-loose:         1.65;

  --tr-display:       0.02em;
  --tr-eyebrow:       0.18em;
  --tr-mono:          0.04em;
  --tr-body:          0;

  /* ── SHAPE / SHADOW ──────────────────────────────────────── */
  --radius-0:         0px;
  --radius-1:         2px;
  --radius-2:         4px;
  --radius-pill:      999px;
  --border-w:         1px;
  --border-w-bold:    2px;

  --shadow-1:         0 1px 0 rgba(20,35,38,0.06), 0 2px 8px rgba(20,35,38,0.04);
  --shadow-2:         0 2px 0 rgba(20,35,38,0.08), 0 8px 24px rgba(20,35,38,0.08);
  --shadow-strike:    4px 4px 0 var(--lwr-rouge);

  /* ── SPACING ─────────────────────────────────────────────── */
  --sp-0:             0px;
  --sp-1:             4px;
  --sp-2:             8px;
  --sp-3:             12px;
  --sp-4:             16px;
  --sp-5:             24px;
  --sp-6:             32px;
  --sp-7:             48px;
  --sp-8:             64px;
  --sp-9:             96px;
  --sp-10:            128px;

  --grid-pixel:       8px;
  --grid-pixel-l:     16px;

  /* ── MOTION ──────────────────────────────────────────────── */
  --ease-standard:    cubic-bezier(.2, .7, .2, 1);
  --ease-strike:      cubic-bezier(.7, 0, .3, 1);
  --dur-1:            120ms;
  --dur-2:            220ms;
  --dur-3:            420ms;
}