/* ============================================================
   BUREAU OF LOST TIMELINES — DESIGN TOKENS
   Version: 1.0 (Dossier system)

   The visual argument: this site is a paper file that happens to be
   on the web. Surfaces are ink (a stacked, near-black grey), type is
   paper (warm off-white, never pure white), and the only colour that
   carries authority is the stamp red of a records office. Phosphor
   green survives exactly where it is diegetic — the vault terminal,
   the boot sequence, and live data readouts.

   LOAD ORDER: this sheet must be the first <link> on every page.
   `css/style.css` and the 15 surface sheets consume these variables;
   the LEGACY BRIDGE at the bottom keeps older sheets rendering
   correctly while they are migrated onto the semantic names.
   ============================================================ */

:root {
  /* ---------- SURFACES: ink, stacked ---------- */
  --ink-0: #0b0c0e;   /* page floor */
  --ink-1: #121417;   /* raised surface: cards, panels */
  --ink-2: #191c21;   /* inset: fields, wells, sticky bars */
  --ink-3: #22262c;   /* hover surface, strong dividers */
  --ink-4: #2c3138;   /* the lightest rule we still call a rule */

  /* ---------- TYPE: paper, never white ---------- */
  --paper:        #dcd8cf;  /* body copy */
  --paper-bright: #f4f1ea;  /* headings, values */
  --paper-dim:    #b5b0a6;  /* secondary copy */
  --muted:        #7d848d;  /* labels, timestamps, disabled */
  --muted-strong: #9aa1a9;  /* meta rows that still need reading */

  /* ---------- AUTHORITY: stamp red ---------- */
  --alert:        #d8323f;  /* the stamp, the spine, the action */
  --alert-bright: #ff5a66;  /* hover, focus, urgent text on ink */
  --alert-deep:   #6e1520;  /* borders of sealed things */
  --alert-glow:   rgba(216, 50, 63, 0.30);
  --alert-wash:   rgba(216, 50, 63, 0.09);
  --alert-wash-2: rgba(216, 50, 63, 0.16);

  /* ---------- PHOSPHOR: data & terminals only ---------- */
  --phosphor:      #33ff66;
  --phosphor-bright: #7dffa5;
  --phosphor-dim:  #1c8a41;
  --phosphor-wash: rgba(51, 255, 102, 0.10);

  /* ---------- REALITY MARKERS ---------- */
  --real:     var(--phosphor);   /* 🟢 a real place, person, photograph */
  --folklore: #e8a33d;           /* 🟡 living belief, shown as belief */
  --fiction:  var(--alert);      /* 🔴 invented for the project */
  --folklore-wash: rgba(232, 163, 61, 0.10);
  --folklore-line: rgba(232, 163, 61, 0.42);

  /* ---------- CATEGORY SPINES (storylines, timeline, dispatch) ---------- */
  --cat-timeline: #9d7bd8;
  --cat-places:   #5aa9d6;
  --cat-observers: var(--folklore);
  --cat-memory:   var(--alert);
  --cat-deep:     var(--phosphor);

  /* The timeline purple is the Bureau's "this is yours" colour — the division stamp
     on a room card and the room composer's focus ring both wash with it. A wash is
     a colour, so it is a token; sheets do not mix their own. */
  --timeline-wash:   rgba(157, 123, 216, 0.07);
  --timeline-wash-2: rgba(157, 123, 216, 0.16);

  /* ---------- RANK METALS (leaderboard) ---------- */
  --gold:   #d9a441;
  --silver: #b8bcc2;
  --bronze: #c07b45;

  /* ---------- STRUCTURAL LINES ---------- */
  --line:        rgba(220, 216, 207, 0.12);  /* default hairline */
  --line-strong: rgba(220, 216, 207, 0.22);  /* edges that hold a shape */
  --line-hair:   rgba(220, 216, 207, 0.07);  /* row separators */
  --line-red:    rgba(216, 50, 63, 0.45);

  /* ---------- TYPE SYSTEM ---------- */
  --font-display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Share Tech Mono', 'Courier New', monospace;
  --font-my: 'Padauk', 'Myanmar Text', 'Noto Sans Myanmar', sans-serif;

  --fs-micro:  10px;   /* stamped codes, timestamps */
  --fs-label:  11px;   /* field labels, nav, buttons */
  --fs-body:   15px;   /* reading size */
  --fs-lede:   17px;
  --fs-h4:     18px;
  --fs-h3:     21px;
  --fs-h2:     clamp(22px, 2.6vw, 30px);
  --fs-h1:     clamp(26px, 4vw, 44px);
  --fs-display: clamp(30px, 6vw, 58px);

  --lh-tight: 1.08;
  --lh-snug:  1.3;
  --lh-body:  1.7;

  --tr-label: 0.14em;   /* tracking for uppercase labels */
  --tr-mono:  0.06em;
  --tr-flat: -0.01em;   /* display face: condensed, so let it breathe out */

  /* ---------- SPACING ---------- */
  --s-0: 4px;
  --s-1: 8px;
  --s-2: 12px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --gutter: clamp(16px, 4vw, 40px);

  /* ---------- SHAPE ---------- */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;
  --spine: 3px;          /* the coloured rail on a record row */
  --gutter-id: 96px;     /* the file-number margin on a dossier row */

  /* ---------- DEPTH ---------- */
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03), 0 10px 24px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 18px 48px rgba(0, 0, 0, 0.6);
  --shadow-alert: 0 0 0 1px var(--alert-deep), 0 22px 60px var(--alert-glow);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

  /* ---------- MOTION ---------- */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 380ms;
  --dur-4: 700ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- LAYOUT ---------- */
  --maxw: 1120px;
  --maxw-narrow: 780px;
  --maxw-modal: 760px;
  --sticky-h: 46px;

  /* Horizontal padding for FULL-BLEED strips (header, wire, tab rail,
     footer). It aligns their text with the content edge of .site-main,
     whose own gutter is --gutter inside a --maxw column: on a wide
     screen the margin is (100% - --maxw)/2, on a narrow one it collapses
     back to the plain gutter. */
  --page-pad: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));

  /* ---------- TEXTURE ---------- */
  --fibre: repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.018) 0 1px,
      transparent 1px 5px);
  --vignette: radial-gradient(120% 80% at 50% 0%, rgba(216, 50, 63, 0.05), transparent 58%),
              radial-gradient(100% 70% at 50% 110%, rgba(0, 0, 0, 0.6), transparent 60%);
}

/* ============================================================
   LEGACY BRIDGE
   Every surface sheet (css/admin.css … css/timeline.css) was written
   against the phosphor palette. These aliases keep them alive during
   the migration: the old "green is everything" names now resolve to
   their dossier equivalent, and the green itself is only reachable
   through --phosphor / --real.
   ============================================================ */
:root {
  --bg:      var(--ink-0);
  --bg-dark: var(--ink-1);
  --fg:          var(--paper);
  --fg-bright:   var(--paper-bright);
  --fg-dim:      var(--muted);
  --fg-mid:      var(--muted-strong);
  --red:    var(--alert);
  --orange: var(--folklore);
  --purple: var(--cat-timeline);
  --blue:   var(--cat-places);
  --yellow: var(--gold);
  --silver: var(--silver);
  --bronze: var(--bronze);
}