/* ─────────────────────────────────────────────────────────────
   La Warroom — Design Tokens
   "Strategy : Studies : Information Warfare"
   Source: LWR_Couleurs.jpg, LWR_Deck_US_03.2026.pptx, LaWarroom_FR.pdf
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Space Mono";
  src: url("assets/fonts/SpaceMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("assets/fonts/SpaceMono-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("assets/fonts/SpaceMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("assets/fonts/SpaceMono-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("assets/fonts/SpaceGrotesk-Variable.ttf") format("truetype-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── BRAND CORE ──────────────────────────────────────────────
     Three-color brand. Red is the strike color, black is the
     ground, gray is the negotiated middle. */
  --lwr-rouge:        #E60050;        /* Rouge — primary, alert, "strike"   */
  --lwr-bordeaux:     #5A1B2A;        /* Bordeaux/oxblood — "livrable" callouts, deep accents */
  --lwr-noir:         #142326;        /* Noir — type, ground, authority     */
  --lwr-noir-site:    #0F1E22;        /* Site canonical dark ground         */
  --lwr-gris:         #A4ACB1;        /* Gris — supporting, civilian, dim   */
  --lwr-blanc:        #FFFFFF;        /* Blanc — paper, light               */

  /* ── ROUGE SCALE — used sparingly, never for backgrounds of body copy */
  --rouge-50:         #FFE7EE;
  --rouge-100:        #FFC2D5;
  --rouge-300:        #FF6F9C;
  --rouge-500:        #E60050;        /* base */
  --rouge-700:        #B30040;
  --rouge-900:        #6E0027;

  /* ── BORDEAUX SCALE — "livrable Warroom" callouts, deep brand accent */
  --bordeaux-300:     #8B3145;
  --bordeaux-500:     #5A1B2A;        /* base */
  --bordeaux-700:     #3E1119;

  /* ── NOIR SCALE — bluish-cool black, the core ink */
  --noir-50:          #F4F6F7;
  --noir-100:        #E2E6E8;
  --noir-200:         #C5CCD0;
  --noir-300:         #8C969B;
  --noir-500:         #3A4A4F;
  --noir-700:         #213035;
  --noir-900:         #142326;        /* base */
  --noir-1000:        #0A1416;        /* deep, full-bleed dark imagery */

  /* ── GRIS SCALE — civilian/secondary, photo-mat */
  --gris-50:          #F2F4F5;
  --gris-100:         #E1E4E6;
  --gris-300:         #C0C6CA;
  --gris-500:         #A4ACB1;        /* base */
  --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);            /* primary text             */
  --fg-2:             var(--noir-700);            /* secondary text           */
  --fg-3:             var(--gris-700);            /* metadata / labels        */
  --fg-mute:          var(--gris-500);            /* disabled, captions       */
  --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);     /* hairline divider         */
  --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;

  /* Type scale — display is monospace, all-lowercase by default.
     Body is Space Grotesk. Tracking is generous. */
  --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;            /* ALL CAPS labels are very tracked */
  --tr-mono:          0.04em;
  --tr-body:          0;

  /* ── SHAPE / SHADOW ──────────────────────────────────────── */
  --radius-0:         0px;                /* flat is the default — pixel grid */
  --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);   /* signature: hard offset */

  /* ── 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;

  /* Pixel grid — the brand's literal motif. Use as a unit when
     building large display elements out of squares. */
  --grid-pixel:       8px;
  --grid-pixel-l:     16px;

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

/* ── SEMANTIC BLOCK STYLES ────────────────────────────────────
   Use these directly via `class="lwr-h1"` etc. or as a recipe
   to copy into product-specific stylesheets. */

.lwr-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

.lwr-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-l);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  text-transform: lowercase;
  color: var(--fg-1);
}

.lwr-h1 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  text-wrap: balance;
}

.lwr-h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: -0.005em;
  color: var(--fg-1);
  text-wrap: balance;
}

.lwr-h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--fg-1);
}

.lwr-p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  text-wrap: pretty;
}

.lwr-p-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body-l);
  line-height: var(--lh-loose);
  color: var(--fg-1);
  text-wrap: pretty;
}

.lwr-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--tr-mono);
  color: var(--fg-2);
}

.lwr-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* The signature ":" prefix (e.g. ": strategy") used in decks */
.lwr-stamp::before {
  content: ":";
  color: var(--lwr-rouge);
  margin-right: 0.4em;
  font-weight: 700;
}

/* The "x" separator (e.g. "stratégie x études x guerre") */
.lwr-x {
  color: var(--lwr-rouge);
  font-weight: 700;
  margin: 0 0.5em;
}

/* Hard offset card */
.lwr-card {
  background: var(--bg-page);
  color: var(--fg-1);
  border: var(--border-w) solid var(--lwr-noir);
  border-radius: var(--radius-0);
  padding: var(--sp-5);
  box-shadow: var(--shadow-strike);
}

/* Inverse card — black ground, white type */
.lwr-card--inverse {
  background: var(--lwr-noir);
  color: var(--fg-on-noir);
  border-color: var(--lwr-noir);
}