/*
 * 3D Film Parts Control OS design tokens. Source: design/Shell.dc.html and docs/handoff/CONTROL_OS_DESIGN_SYSTEM.md.
 * Dark is the primary theme, light is the Braun test. Every screen renders in both from the same source.
 * Colour has a job: orange = current operating focus and human attention; red = fault, overdue, critical;
 * green = verified good, sparingly; ink = neutral action and opportunity; hollow grey = unknown, not connected, never run.
 * Never colour a number because it is a number.
 */
:root {
  --bg: #111112; --sf: #161618; --sf2: #1c1c1f;
  --bd: rgba(255,255,255,.09); --bd2: rgba(255,255,255,.18);
  --tx: #ebe9e4; --tx2: #c9c8c3; --mu: #8a8a90; --dm: #5d5d63;
  --or: #f26a1b; --ortx: #111112; --rd: #e5232c; --gn: #3fb960;
  --bar: #2c2c31; --foot: #050506; --logo: none;
  --scrim: rgba(0,0,0,.55);

  /* Archetype identity colour (owner, 16 September 2026): the App Fleet icon tile only. This is category
     identity, not status, so it stays clear of the status vocabulary above (orange/red/green keep their job). */
  --arc-operations: #4f9dff; --arc-data: #2fd0b0; --arc-engineering: #ffb02e; --arc-communication: #b892f2;
  --arc-content: #ff6fa8; --arc-system: #6fc6e0; --arc-simple-utility: #9fd356; --arc-shell: #9a9aa2;

  --font-text: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* type scale (Space Grotesk for identity and reading, JetBrains Mono for labels and values) */
  /* Raised across the board (owner, 16 September 2026): every size here is +2 to +3pt over the original scale. */
  --fs-hero: 108px; --fs-title: 47px; --fs-decision: 33px; --fs-lens-title: 25px; --fs-body: 17px; --fs-row: 16px; --fs-small: 14.5px;
  --fs-label: 13px; --fs-value: 14.5px; --fs-min: 12.5px;

  /* layout */
  --nav-w: 212px; --top-h: 64px; --foot-h: 60px; --lens-w: 400px;
  --gutter: 40px; --lens-gutter: 24px; --mode-h: 44px; --row-h: 44px; --head-h: 34px;
  --r-instrument: 3px; --r-control: 4px; --hair: 1px;
  --t: 120ms;
  /* One motion language (owner, 20 September 2026: "like if Dieter Rams made an app"): three speeds, one curve.
     Quick for a hover or a tick, calm for a panel, slow only for something arriving from off screen. */
  --t-quick: 110ms; --t-calm: 200ms; --t-enter: 260ms; --ease: cubic-bezier(.32, .72, 0, 1);
  --touch: 44px;

  color-scheme: dark;
}

/* Light theme: explicit preference, or system preference when the choice is "system". */
:root[data-theme="light"],
:root:not([data-theme="dark"]):not([data-theme="light"]) { /* placeholder so the selector below has precedence order */ }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --bg: #ece9e2; --sf: #e3e0d8; --sf2: #d9d6ce; --bd: rgba(20,20,22,.12); --bd2: rgba(20,20,22,.24); --tx: #1b1b1d; --tx2: #3b3b3e; --mu: #6d6d72; --dm: #7f7e7a; --or: #e8590c; --ortx: #f7f5f0; --rd: #c41f28; --gn: #2d8a48; --bar: #cbc8c0; --foot: #d3cfc6; --logo: invert(1); --scrim: rgba(20,20,22,.35); color-scheme: light;
    --arc-operations: #1f6fd6; --arc-data: #0e9c82; --arc-engineering: #b97a12; --arc-communication: #7c4fd1; --arc-content: #d03876; --arc-system: #1f87a8; --arc-simple-utility: #5c9421; --arc-shell: #6d6d72; }
}
:root[data-theme="light"] { --bg: #ece9e2; --sf: #e3e0d8; --sf2: #d9d6ce; --bd: rgba(20,20,22,.12); --bd2: rgba(20,20,22,.24); --tx: #1b1b1d; --tx2: #3b3b3e; --mu: #6d6d72; --dm: #7f7e7a; --or: #e8590c; --ortx: #f7f5f0; --rd: #c41f28; --gn: #2d8a48; --bar: #cbc8c0; --foot: #d3cfc6; --logo: invert(1); --scrim: rgba(20,20,22,.35); color-scheme: light;
  --arc-operations: #1f6fd6; --arc-data: #0e9c82; --arc-engineering: #b97a12; --arc-communication: #7c4fd1; --arc-content: #d03876; --arc-system: #1f87a8; --arc-simple-utility: #5c9421; --arc-shell: #6d6d72; }
:root[data-theme="dark"] { --bg: #111112; --sf: #161618; --sf2: #1c1c1f; --bd: rgba(255,255,255,.09); --bd2: rgba(255,255,255,.18); --tx: #ebe9e4; --tx2: #c9c8c3; --mu: #8a8a90; --dm: #5d5d63; --or: #f26a1b; --ortx: #111112; --rd: #e5232c; --gn: #3fb960; --bar: #2c2c31; --foot: #050506; --logo: none; --scrim: rgba(0,0,0,.55); color-scheme: dark;
  --arc-operations: #4f9dff; --arc-data: #2fd0b0; --arc-engineering: #ffb02e; --arc-communication: #b892f2; --arc-content: #ff6fa8; --arc-system: #6fc6e0; --arc-simple-utility: #9fd356; --arc-shell: #9a9aa2; }

/* Mono label and value voices, reused everywhere. */
.mono { font-family: var(--font-mono); font-weight: 500; }
.label { font: 500 var(--fs-min) var(--font-mono); letter-spacing: .14em; color: var(--mu); text-transform: uppercase; }
.label-xs { font: 500 10px var(--font-mono); letter-spacing: .14em; color: var(--dm); text-transform: uppercase; }
.value { font: 500 var(--fs-value) var(--font-mono); }
.dim { color: var(--mu); }
.faint { color: var(--dm); }
.c-or { color: var(--or); } .c-rd { color: var(--rd); } .c-gn { color: var(--gn); } .c-tx { color: var(--tx); } .c-mu { color: var(--mu); } .c-dm { color: var(--dm); }