/* Noir OFM — design tokens (dark only).
   Custom properties only. Components live in ui.css; nothing in the app links either file yet.
   Load rule at migration: link this file LAST (after fanvue.css), because theme.css declares the
   legacy names under :root[data-theme=dark] and four stylesheets load after theme.css.
   Rationale, contrast numbers and rules: docs/DESIGN_SYSTEM.md. */

:root, :root[data-theme] {
  color-scheme: dark;

  /* ---- Neutrals: tone is elevation. Panels are separated by tone, not borders. ---- */
  --bg-0: #0B0B0C;                    /* canvas */
  --bg-1: #161618;                    /* panel, card */
  --bg-2: #1C1C1F;                    /* raised: inputs, hover rows, active nav pill, chips */
  --bg-3: #242429;                    /* floating: menus, dialogs */
  --fg-1: #F2F2F0;                    /* primary text — 17.6:1 on bg-0 */
  --fg-2: rgba(255, 255, 255, .64);   /* secondary — ≈8:1 on every tone */
  --fg-3: rgba(255, 255, 255, .42);   /* tertiary, placeholders, eyebrows — ≈4:1 */
  --fg-4: rgba(255, 255, 255, .28);   /* disabled text only */
  --edge: rgba(255, 255, 255, .06);   /* the rare hairline: table rows, dividers */
  --edge-solid: #1F1F23;              /* opaque hairline for legacy rules that paint --line as a background */
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, .05); /* top-light on raised surfaces instead of a border */

  /* ---- Accent: amber. One primary action per region; rings; highlights. Never a wash. ---- */
  --accent: #F5B92E;                  /* H42 S91 L57 — 11:1 as text on bg-0 */
  --accent-hover: #FFC94D;
  --accent-fg: #1A1200;               /* label on an accent fill — 10.5:1 */
  --focus: var(--accent);             /* the 2px focus ring */

  /* ---- Status: a mark (shape + hue), never a pill. Separate from the accent. ---- */
  --ok: #34C77B;                      /* done / verified — filled circle. Never decorative. */
  --bad: #E5484D;                     /* failed — filled square. H357, 45° from the accent. */
  --busy: var(--fg-2);                /* in progress — hollow ring with an orbiting satellite */
  --idle: var(--fg-4);                /* queued / not started / cancelled — small solid dot */
  --attention: #EA580C;               /* act now — filled triangle plus a 1px edge on the whole card. Deep orange: distinct from the accent and from failed's red in normal vision; collapses toward failed under deuteranopia (accepted tradeoff, see docs). */

  /* ---- Type ---- */
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --t-11: 11px;  --t-12: 12px;  --t-13: 13px;  /* UI base */
  --t-14: 14px;  --t-16: 16px;  --t-20: 20px;  --t-24: 24px;  --t-30: 30px;  --t-40: 40px;
  --w-regular: 400;  --w-medium: 500;  --w-semibold: 600;
  --lh-tight: 1.2;   --lh-body: 1.45;
  --track-eyebrow: .08em;             /* 11px uppercase eyebrows */
  --track-display: -.01em;            /* ≥ 20px */

  /* ---- Spacing: 4px base ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 20px;  --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --h-sm: 28px;  --h-md: 32px;  --h-lg: 40px;   /* control heights */
  --pad-panel: var(--s-5);
  --tiles: 6;                          /* grid density: tiles per row (3–12), set by the density control and persisted per user */
  --tile-ratio: 3 / 4;                 /* thumbnail aspect follows --tiles: 9/16 at 3–4, 3/4 at 5–6, 4/5 at 7–8, 1/1 at 9–10, 4/3 at 11–12 */
  --pad-row: var(--s-3);

  /* ---- Shape ---- */
  --r-xs: 6px;    /* chips, kbd */
  --r-sm: 8px;    /* inputs, small buttons */
  --r-md: 12px;   /* buttons, menus */
  --r-lg: 18px;   /* panels, cards */
  --r-xl: 24px;   /* dialogs, hero panels */
  --r-pill: 999px;

  /* ---- Elevation: tone first; shadows only for floating layers ---- */
  --shadow-menu: 0 8px 24px rgba(0, 0, 0, .5);
  --shadow-dialog: 0 24px 64px rgba(0, 0, 0, .6);
  --backdrop: rgba(0, 0, 0, .55);
  /* z-index only for in-flow layers; anything modal or floating uses the browser top layer */
  --z-sticky: 10;  --z-nav: 20;  --z-popover: 30;

  /* ---- Motion ---- */
  --dur-1: 120ms;   /* colour, hover */
  --dur-2: 200ms;   /* menus, chips */
  --dur-3: 320ms;   /* dialogs, sheets */
  --dur-pulse: 1600ms;
  --dur-busy: 2000ms;   /* busy satellite orbit; instances are staggered so a grid never spins in lockstep */
  --dur-shimmer: 1400ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);

  /* ---- Bridge (stage 1 of migration; inert until this file is linked).
     Re-points the legacy names from theme.css / app.css at the tokens above so legacy CSS
     re-skins in one step. It cannot reach hardcoded hexes — see the stage-2 purge list. ---- */
  --canvas: var(--bg-0);
  --surface: var(--bg-1);
  --surface-raised: var(--bg-2);
  --surface-muted: var(--bg-2);
  --media-bg: #000;
  --ink: var(--fg-1);
  --muted: var(--fg-2);
  --line: var(--edge-solid);
  --accent-ink: var(--accent-fg);
  --success: var(--ok);
  --green: var(--ok);
  --danger: var(--bad);
  --warning: var(--attention);
  --white: var(--bg-1);
  --cream: var(--bg-2);
  --radius: var(--r-lg);
  /* names that legacy CSS reads but nothing ever defined */
  --font-display: var(--font);
  --panel: var(--bg-1);
  --surface-2: var(--bg-2);
  --surface-3: var(--bg-3);
  --surface2: var(--bg-2);
  --text: var(--fg-1);
  --line-strong: rgba(255, 255, 255, .12);
  --accent-soft: transparent;         /* tinted accent fills are forbidden by rule */
}

html, body { background: var(--bg-0); color: var(--fg-1); }

@media (prefers-reduced-motion: reduce) {
  :root, :root[data-theme] { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-pulse: 0ms; --dur-busy: 0ms; --dur-shimmer: 0ms; }
}
/* Playground toggle so the reduced state can be reviewed without changing OS settings. */
:root[data-motion="reduce"] { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-pulse: 0ms; --dur-busy: 0ms; --dur-shimmer: 0ms; }