/* =========================================================================
   SWARMIO SEASON 2 — shared design tokens

   One sheet for every surface: the app, the code workspace, Mission Control,
   the cloud's public pages and the admin console all link /tokens.css, so a
   colour is decided once.

   The room is seafoam, chosen to rest the eyes over long sessions: flat,
   mid-light surfaces, moderate contrast (roughly 7–9:1 for text), no pure
   black or white. Night keeps seafoam on what carries meaning (screen text,
   live progress, readouts) and lets the big surfaces fall to an organic
   neutral the user picks: Spruce (base), Moss, Walnut or Slate.

   Theme state lives on <html>:
     data-theme  absent = follow the system, "light" = Day, "dark" = Night
     data-night  spruce | moss | walnut | slate (only matters in Night)
   A tiny inline script in each page head sets both from localStorage before
   first paint, so there is no flash of the wrong room.
   ========================================================================= */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/HankenGrotesk-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/HankenGrotesk-Variable-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---- room (Day) ---- */
  --room: #cbe0d5;
  --card: #d8e9e0;
  --card-2: #e2efe8;
  --line: rgba(28, 72, 56, 0.15);
  --line-soft: rgba(28, 72, 56, 0.09);
  --ink: #1d3a30;
  --ink-2: #48695d;
  --ink-3: #6a8d80;

  /* ---- console: frame + screen ---- */
  --bezel: #b4d2c3;
  --bezel-edge: rgba(28, 72, 56, 0.22);
  --scr: #e1efe8;
  --scr-2: #d6e9df;
  --scr-line: rgba(28, 72, 56, 0.14);
  --scr-ink: #1e4a3c;
  --scr-ink-2: #3f6e5f;
  --scr-ink-3: #6a9386;
  --scr-hi: #163c31;
  --fill: #3f8c72;
  --track: rgba(28, 72, 56, 0.12);
  --done: #a3843f;

  /* ---- plates mounted in walnut ---- */
  --rail-plate: #22413a;
  --rail-ink: #d7ece2;
  --rail-ink-2: #91b7a8;
  --rail-hover: rgba(215, 236, 226, 0.07);
  --rail-pill: rgba(215, 236, 226, 0.13);
  --plate: #eef5f1;
  --plate-ink: #1d3a30;
  --plate-ink-2: #5e8073;
  --plate-line: rgba(28, 72, 56, 0.16);

  /* ---- annunciators ---- */
  --ann-off: #d2e5db;
  --ann-off-ink: rgba(30, 74, 60, 0.44);
  --caution-bg: #f1d896;
  --caution-ink: #573c06;
  --alarm-bg: #f0c2b2;
  --alarm-ink: #6a2414;
  --notice-bg: #a8dec6;
  --notice-ink: #12402f;

  /* ---- action + semantic ---- */
  --ochre: #ddae47;          /* the one loud colour: primary actions only */
  --ochre-hi: #e6b954;
  --ochre-ink: #2a1f06;
  --accent-ink: #7f5c0c;     /* ochre family, dark enough to read as text */
  --accent-hi: #8a6510;      /* the old "bright accent", as text: deep by day */
  --terra: #b5543d;
  --ok: #3f8c72;
  --warn: #9a6c12;
  --err: #b5543d;
  --shadow: rgba(20, 60, 45, 0.26);
  --focus: #c8962f;

  /* ---- identity hues: capabilities + agent roles ----
     Hue per element (--h, --cap-h); lightness and chroma per theme, so every
     dot quiets or brightens together. */
  --id-l: 0.58;
  --id-c: 0.11;
  --id-tl: 0.46;
  --cap-h: 55;
  --cap: oklch(var(--id-l) var(--id-c) var(--cap-h));
  --cap-ink: oklch(var(--id-tl) var(--id-c) var(--cap-h));

  /* ---- type ---- */
  --f-ui: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-code: "Geist Mono", "SFMono-Regular", "SF Mono", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
  --read-w: 300;             /* weight of large instrument readouts */

  /* ---- shape, motion, space ---- */
  /* One corner radius for every rounded rectangle on every surface. Pills
     (999px) and circles (50%) are shapes, not corners, and stay as they are.
     The -sm / -lg names survive only as aliases so older rules still land on
     the one value. */
  --radius: 10px;
  --radius-sm: var(--radius);
  --radius-lg: var(--radius);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* ---- wood ---- */
  --walnut: #3e2819;
  --wood-h: url("/assets/wood/walnut-h.webp");
  --wood-v: url("/assets/wood/walnut-v.webp");

  /* ---- legacy names (pre-Season-2 CSS still reads these) ---- */
  --black: var(--room);
  --paper: var(--room);
  --paper-2: var(--card);
  --paper-raise: var(--card-2);
  --scrim: var(--card);
  --scrim-strong: var(--card);
  --scrim-blur: none;
  --ink-dim: color-mix(in oklab, var(--ink) 70%, var(--ink-2));
  --ink-faint: var(--ink-2);
  --ink-ghost: color-mix(in oklab, var(--ink) 26%, transparent);
  --dim: var(--ink-2);
  --amber: var(--accent-ink);
  --amber-bright: var(--accent-hi);
  --amber-deep: color-mix(in oklab, var(--ochre) 75%, #000);
  --amber-glow: color-mix(in oklab, var(--ochre) 16%, transparent);  /* a selected-state tint, never a glow */
  --amber-dim: color-mix(in oklab, var(--accent-ink) 55%, transparent);
  --accent: var(--accent-ink);
  --panel: var(--card);
  --bad: var(--err);
  --display: var(--f-ui);
  --sans: var(--f-ui);
  --serif: var(--f-ui);
  --mono: var(--f-ui);       /* chips/labels: engraved caps, not monospace */
  --code: var(--f-code);
  --display-track: -0.01em;
}

/* ---- Night: Spruce is the base night ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --room: #173029; --card: #1c372f; --card-2: #213e36;
    --line: rgba(160, 220, 196, 0.12); --line-soft: rgba(160, 220, 196, 0.07);
    --ink: #cfe5da; --ink-2: #95b6a9; --ink-3: #6a8d80;
    --bezel: #24433a; --bezel-edge: rgba(0, 0, 0, 0.4);
    --scr: #112a24; --scr-2: #15312a; --scr-line: rgba(160, 220, 196, 0.11);
    --scr-ink: #9ed6bf; --scr-ink-2: #7cb39d; --scr-ink-3: #5b8c7a; --scr-hi: #c6ebdb;
    --fill: #86cdb0; --track: rgba(160, 220, 196, 0.1); --done: #bfa068;
    --rail-plate: #0f241f; --rail-ink: #cfe5da; --rail-ink-2: #7fa596;
    --plate: #1b3831; --plate-ink: #cfe5da; --plate-ink-2: #8aae9f; --plate-line: rgba(160, 220, 196, 0.16);
    --ann-off: #15322b; --ann-off-ink: rgba(158, 214, 191, 0.32);
    --caution-bg: #4c3c14; --caution-ink: #f3d27f; --alarm-bg: #4d2219; --alarm-ink: #f2a891; --notice-bg: #1f5544; --notice-ink: #c9f0df;
    --accent-ink: #e2b54c; --accent-hi: #e6b954; --ok: #86cdb0; --warn: #e0b45a; --err: #e08a72; --terra: #d9735a;
    --shadow: rgba(0, 0, 0, 0.5); --focus: #e2b54c;
    --id-l: 0.76; --id-c: 0.095; --id-tl: 0.82;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --room: #173029; --card: #1c372f; --card-2: #213e36;
  --line: rgba(160, 220, 196, 0.12); --line-soft: rgba(160, 220, 196, 0.07);
  --ink: #cfe5da; --ink-2: #95b6a9; --ink-3: #6a8d80;
  --bezel: #24433a; --bezel-edge: rgba(0, 0, 0, 0.4);
  --scr: #112a24; --scr-2: #15312a; --scr-line: rgba(160, 220, 196, 0.11);
  --scr-ink: #9ed6bf; --scr-ink-2: #7cb39d; --scr-ink-3: #5b8c7a; --scr-hi: #c6ebdb;
  --fill: #86cdb0; --track: rgba(160, 220, 196, 0.1); --done: #bfa068;
  --rail-plate: #0f241f; --rail-ink: #cfe5da; --rail-ink-2: #7fa596;
  --plate: #1b3831; --plate-ink: #cfe5da; --plate-ink-2: #8aae9f; --plate-line: rgba(160, 220, 196, 0.16);
  --ann-off: #15322b; --ann-off-ink: rgba(158, 214, 191, 0.32);
  --caution-bg: #4c3c14; --caution-ink: #f3d27f; --alarm-bg: #4d2219; --alarm-ink: #f2a891; --notice-bg: #1f5544; --notice-ink: #c9f0df;
  --accent-ink: #e2b54c; --accent-hi: #e6b954; --ok: #86cdb0; --warn: #e0b45a; --err: #e08a72; --terra: #d9735a;
  --shadow: rgba(0, 0, 0, 0.5); --focus: #e2b54c;
  --id-l: 0.76; --id-c: 0.095; --id-tl: 0.82;
}

/* ---- Night palettes: the big surfaces move to an organic neutral ---- */
:root[data-theme="dark"][data-night="moss"] {
  --room: #1e201b; --card: #23261f; --card-2: #282b23; --line: rgba(222, 224, 204, 0.1); --line-soft: rgba(222, 224, 204, 0.06);
  --ink: #dfe0d3; --ink-2: #a6a997; --ink-3: #777b6c; --bezel: #2b2e26; --bezel-edge: rgba(0, 0, 0, 0.45);
  --scr: #161914; --scr-2: #1b1e18; --scr-line: rgba(222, 224, 204, 0.09);
  --scr-ink: #a9d8c3; --scr-ink-2: #86b39f; --scr-ink-3: #6c8378; --scr-hi: #ddefe5; --fill: #8fd0b4; --track: rgba(222, 224, 204, 0.09);
  --rail-plate: #131511; --rail-ink: #dfe0d3; --rail-ink-2: #8e9283;
  --plate: #24271f; --plate-ink: #dfe0d3; --plate-ink-2: #9a9e8c; --plate-line: rgba(222, 224, 204, 0.14);
  --ann-off: #1c1f19; --ann-off-ink: rgba(169, 216, 195, 0.3);
}
:root[data-theme="dark"][data-night="walnut"] {
  --room: #231c17; --card: #29211b; --card-2: #2e2620; --line: rgba(236, 222, 204, 0.1); --line-soft: rgba(236, 222, 204, 0.06);
  --ink: #ebe1d4; --ink-2: #b5a795; --ink-3: #86786a; --bezel: #33291f; --bezel-edge: rgba(0, 0, 0, 0.45);
  --scr: #191512; --scr-2: #1f1a16; --scr-line: rgba(236, 222, 204, 0.09);
  --scr-ink: #a7d9c4; --scr-ink-2: #85b5a0; --scr-ink-3: #748478; --scr-hi: #e0f1e8; --fill: #8eceb2; --track: rgba(236, 222, 204, 0.09);
  --rail-plate: #16110e; --rail-ink: #ebe1d4; --rail-ink-2: #9c8e7e;
  --plate: #2b231c; --plate-ink: #ebe1d4; --plate-ink-2: #a79886; --plate-line: rgba(236, 222, 204, 0.14);
  --ann-off: #201a15; --ann-off-ink: rgba(167, 217, 196, 0.3);
}
:root[data-theme="dark"][data-night="slate"] {
  --room: #1b2124; --card: #20272a; --card-2: #252c30; --line: rgba(214, 226, 228, 0.1); --line-soft: rgba(214, 226, 228, 0.06);
  --ink: #dce3e4; --ink-2: #9ca9ac; --ink-3: #6e7b7e; --bezel: #283034; --bezel-edge: rgba(0, 0, 0, 0.45);
  --scr: #141a1d; --scr-2: #192023; --scr-line: rgba(214, 226, 228, 0.09);
  --scr-ink: #a4d5c3; --scr-ink-2: #83b0a1; --scr-ink-3: #677f7a; --scr-hi: #dceee7; --fill: #8ccbb4; --track: rgba(214, 226, 228, 0.09);
  --rail-plate: #111618; --rail-ink: #dce3e4; --rail-ink-2: #87969a;
  --plate: #222a2e; --plate-ink: #dce3e4; --plate-ink-2: #93a1a4; --plate-line: rgba(214, 226, 228, 0.14);
  --ann-off: #192023; --ann-off-ink: rgba(164, 213, 195, 0.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"])[data-night="moss"] {
    --room: #1e201b; --card: #23261f; --card-2: #282b23; --line: rgba(222, 224, 204, 0.1); --line-soft: rgba(222, 224, 204, 0.06);
    --ink: #dfe0d3; --ink-2: #a6a997; --ink-3: #777b6c; --bezel: #2b2e26; --bezel-edge: rgba(0, 0, 0, 0.45);
    --scr: #161914; --scr-2: #1b1e18; --scr-line: rgba(222, 224, 204, 0.09);
    --scr-ink: #a9d8c3; --scr-ink-2: #86b39f; --scr-ink-3: #6c8378; --scr-hi: #ddefe5; --fill: #8fd0b4; --track: rgba(222, 224, 204, 0.09);
    --rail-plate: #131511; --rail-ink: #dfe0d3; --rail-ink-2: #8e9283;
    --plate: #24271f; --plate-ink: #dfe0d3; --plate-ink-2: #9a9e8c; --plate-line: rgba(222, 224, 204, 0.14);
    --ann-off: #1c1f19; --ann-off-ink: rgba(169, 216, 195, 0.3);
  }
  :root:not([data-theme="light"])[data-night="walnut"] {
    --room: #231c17; --card: #29211b; --card-2: #2e2620; --line: rgba(236, 222, 204, 0.1); --line-soft: rgba(236, 222, 204, 0.06);
    --ink: #ebe1d4; --ink-2: #b5a795; --ink-3: #86786a; --bezel: #33291f; --bezel-edge: rgba(0, 0, 0, 0.45);
    --scr: #191512; --scr-2: #1f1a16; --scr-line: rgba(236, 222, 204, 0.09);
    --scr-ink: #a7d9c4; --scr-ink-2: #85b5a0; --scr-ink-3: #748478; --scr-hi: #e0f1e8; --fill: #8eceb2; --track: rgba(236, 222, 204, 0.09);
    --rail-plate: #16110e; --rail-ink: #ebe1d4; --rail-ink-2: #9c8e7e;
    --plate: #2b231c; --plate-ink: #ebe1d4; --plate-ink-2: #a79886; --plate-line: rgba(236, 222, 204, 0.14);
    --ann-off: #201a15; --ann-off-ink: rgba(167, 217, 196, 0.3);
  }
  :root:not([data-theme="light"])[data-night="slate"] {
    --room: #1b2124; --card: #20272a; --card-2: #252c30; --line: rgba(214, 226, 228, 0.1); --line-soft: rgba(214, 226, 228, 0.06);
    --ink: #dce3e4; --ink-2: #9ca9ac; --ink-3: #6e7b7e; --bezel: #283034; --bezel-edge: rgba(0, 0, 0, 0.45);
    --scr: #141a1d; --scr-2: #192023; --scr-line: rgba(214, 226, 228, 0.09);
    --scr-ink: #a4d5c3; --scr-ink-2: #83b0a1; --scr-ink-3: #677f7a; --scr-hi: #dceee7; --fill: #8ccbb4; --track: rgba(214, 226, 228, 0.09);
    --rail-plate: #111618; --rail-ink: #dce3e4; --rail-ink-2: #87969a;
    --plate: #222a2e; --plate-ink: #dce3e4; --plate-ink-2: #93a1a4; --plate-line: rgba(214, 226, 228, 0.14);
    --ann-off: #192023; --ann-off-ink: rgba(164, 213, 195, 0.3);
  }
}

/* --cap is resolved where it is declared, so an element that sets its own
   --cap-h (every [data-mode] block) must re-derive it, or it inherits the
   root's already-computed hue. */
[data-mode] {
  --cap: oklch(var(--id-l) var(--id-c) var(--cap-h));
  --cap-ink: oklch(var(--id-tl) var(--id-c) var(--cap-h));
}

/* ---- shared building blocks ---- */
/* Wood is only ever a frame. Text sits on a plate, never on the grain. */
.wood-h { background: var(--walnut) var(--wood-h) center / 2400px 220px; }
.wood-v { background: var(--walnut) var(--wood-v) center top / 360px 2400px; }
.inset { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 238, 210, 0.2); }
/* Identity dot: set --h on the element (capability or agent role hue). */
.idot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: oklch(var(--id-l) var(--id-c) var(--h, var(--cap-h))); }
.idt { color: oklch(var(--id-tl) var(--id-c) var(--h, var(--cap-h))); }
/* Engraved label: plate-marking caps. */
.eng { font-family: var(--f-ui); font-weight: 600; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; }