/* ── Design tokens — siarheimardovich.com v2 · DARK (site-v-mimo) ── */
/* Reversed palette: pitch-black ground, high-contrast light ink.
   All text colors pass WCAG AA (4.5:1) on #000; most pass AAA (7:1).
   Derived from the light tokens.css with full inversion. */

:root {
  color-scheme: dark;

  /* ── Type families ── */
  --font-sans: 'Geist Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* ── Type scale — single valid lengths. Floor is 0.75rem/12px (CLAUDE.md). ── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-display: clamp(2rem, 1.35rem + 2.6vw, 3rem);

  /* ── Line heights — never combined into the size tokens ── */
  --lh-tight:   1.15;
  --lh-heading: 1.25;
  --lh-snug:    1.4;
  --lh-body:    1.6;

  /* ── Weights ── */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── Tracking ── */
  --track-tight: -0.02em;
  --track-label:  0.06em;

  /* ── Palette — pitch-black ground, light ink ── */
  --paper:      #000000;
  --paper-2:    #0a0a0a;
  --ink:        #f5f5f5;
  --ink-2:      #b3b3b3;
  --ink-3:      #737373;
  --hairline:   #1a1a1a;
  --hairline-2: #222222;
  --accent:     #6e8efb;
  --print-rule: #525252;

  /* ── Spacing — 8px baseline unit ── */
  --unit: 8px;
  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* ── Radius ── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* ── Layout ── */
  /* Widened from 72rem. The cases carry dense figures and wide tables, and a 1152px
     frame squeezed both. Prose is still held to --measure, so line length does not
     grow with the container; only the figures and tables gain the room. */
  --container: 88rem;
  --gutter:    24px;
  --measure:   68ch;
  --topbar-h:  56px;
  --rail-w:    56px;
  --rail-right-w: 200px;

  /* ── Breakpoints (documented; media queries repeat the literals) ── */
  --bp-sm: 640px;
  --bp-md: 900px;
  --bp-lg: 1200px;

  /* ── Chrome ── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.5);

  /* ── Stacking ── */
  --z-topbar: 100;
  --z-rail:    50;
  /* The drawer sits above the top bar: it is a modal surface, and a fixed bar
     cutting across a modal panel reads as a rendering fault. */
  --z-drawer-backdrop: 200;
  --z-drawer:          201;

  /* ── Drawer widths — content-driven, named so triggers stay declarative ──
     A trigger names what its content needs; drawer.js writes the value to --drawer-w.
     Every one is capped at 100vw by the .drawer rule, so nothing overflows. */
  /* Proportional, so the panel grows with the display instead of stopping at a fixed
     pixel width on a large monitor. Each keeps a pixel ceiling only where a wider panel
     would stop helping. The largest deliberately reaches 90% of the viewport. */
  --drawer-sm: min(90vw, 720px);    /* a tall narrow instrument, a single control */
  --drawer-md: min(90vw, 1100px);   /* a diagram, a portrait screenshot */
  --drawer-lg: 82vw;                /* a workspace prototype */
  --drawer-xl: 90vw;                /* a dense multi-pane prototype, and the default */

  /* Floor for a desktop prototype inside the panel. Below this the drawer body
     scrolls horizontally rather than squashing a dense workspace into a column.
     Suspended under 900px, where a prototype should reflow instead. */
  --drawer-frame-min: 1120px;
}