/* deck-tokens.css — THE deck's colour vocabulary, one sheet, both colourways.
 *
 * Canonical source: launch/DESIGN-deck-language_2026-09.md (LOCKED 2026-09-05,
 * Damian: "language locked — adopt the traffic lights deck-wide"). Where any
 * screen and that file disagree, the file wins; where this sheet and that file
 * disagree, fix THIS sheet to match the file — never a screen to match a screen.
 *
 * Dark is the brand default and lives on bare :root; the light colourway is a
 * complete override under :root[data-theme="light"]. The toggle flips ONE
 * attribute — no component may carry a colour that bypasses these tokens.
 * Served at /deck-tokens.css by the console server; consumed by the three
 * controldeck shells and, as they convert, every module canvas.
 *
 * The mapping rule for any future value (DESIGN §1): hues keep their JOB and
 * deepen for light ground; gold FILLS stay #e6a93c everywhere, gold TEXT
 * darkens to #8a5e0b on light. Gold = something to unlock or mind · sky = the
 * active thing · green/coral = outcomes only, never decoration.
 *
 * THE GLASS LAYER (DESIGN §6, Damian 2026-09-06 "yes yes yes"): the ground is
 * a brand gradient (--cp-ground), top-level surfaces are translucent blurred
 * panels (.glass, below), the rail is a compact icon column with InkFox on
 * top. It ADDS tokens; every §1 hue keeps its job. The AA guard
 * (deck-tokens-contrast.test.mjs) composites the glass over the gradient's
 * darkest and lightest points and holds every text token to both.
 */

:root{
  color-scheme: dark;

  /* ── ground / surfaces ── */
  --ground:#0b2a32; --ground-2:#071e24; --ground-wash:#123f3a;
  --ink:#f4efe3; --ink-soft:#e7e2d6; --muted:#9db3b7;
  --line:rgba(244,239,227,.14); --line-soft:rgba(244,239,227,.06);
  --card-hi:#0e353f; --card-lo:#0a2830;
  --panel:rgba(255,255,255,.025); --panel-hover:rgba(255,255,255,.05);
  --pos:#37b07e; --neg:#e0562f; --gold:#e6a93c;

  /* ── --cp-* vocabulary (what components consume) ── */
  --cp-bg:var(--ground); --cp-surface:var(--card-hi); --cp-surface-2:var(--card-lo);
  --cp-surface-3:rgba(255,255,255,.04);

  /* ── THE GLASS LAYER (DESIGN §6, adopted 2026-09-06) ──────────────────
   * §6a the ground: three brand washes (the fox's ember top-left, sky
   * top-right, coral bottom-centre) over the §1 ground. Fixed to the
   * viewport by whoever paints it; --cp-bg stays the flat fallback beneath. */
  --cp-ground:radial-gradient(900px 620px at 10% 14%, rgba(232,137,46,.62), transparent 62%), radial-gradient(820px 720px at 88% 22%, rgba(74,168,219,.55), transparent 62%), radial-gradient(1100px 760px at 58% 104%, rgba(224,86,47,.5), transparent 62%), linear-gradient(160deg,#0b2a32,#071e24);
  /* §6b the surface: a translucent, blurred, hair-lined panel (the .glass
   * component below). Wells, chips, rows and pills sit ON the glass, opaque-
   * ish, so depth reads — never glass-on-glass more than one level. */
  --cp-glass:rgba(255,255,255,.07);
  --cp-glass-border:rgba(255,255,255,.14);
  --cp-glass-blur:blur(28px) saturate(150%);
  --cp-glass-hi:inset 0 1px 0 rgba(255,255,255,.12);  /* the inset top highlight */
  --cp-chip:rgba(255,255,255,.09); --cp-chip-border:rgba(255,255,255,.12);
  --cp-well:rgba(4,20,26,.35);                          /* inner well, on glass */
  --cp-well-hi:inset 0 1px 0 rgba(0,0,0,.25);
  /* §6c the rail: item ink, the active fill + its highlight, the fox's glow */
  /* §6g the rail's OWN glass (Damian's ruling, 2026-09-06): the 72px column
   * sits on the ember hot-spot, where a card's --cp-glass composites to
   * #906a3e and even --ink reads 4.23. The rail carries a touch more body —
   * the well's own tint at .44, the smallest step (computed, not eyeballed)
   * that clears 4.5 for --ink, --ink-soft AND --muted at the column's
   * lightest point (#4e3e26: 8.98 / 7.97 / 4.69). The gradient is untouched.
   * It REPLACES --cp-glass on the rail; it is not laid over it. */
  --cp-rail-glass:rgba(4,20,26,.44);
  --cp-rail-ink:rgba(244,239,227,.72);
  --cp-rail-on:rgba(255,255,255,.14); --cp-rail-on-hi:inset 0 1px 0 rgba(255,255,255,.18);
  --cp-fox-glow:0 10px 24px -10px rgba(232,137,46,.9);
  /* §6d the module tab pill-bar's active tab */
  --cp-tab-on:rgba(255,255,255,.12);
  --cp-text:var(--ink); --cp-text-2:var(--ink-soft); --cp-muted:var(--muted);
  --cp-border:var(--line); --cp-border-2:rgba(244,239,227,.22);
  /* panel washes — three tiers, DESIGN §1 */
  --cp-wash-1:rgba(255,255,255,.04);
  --cp-wash-2:rgba(255,255,255,.05);
  --cp-wash-3:rgba(255,255,255,.08);

  /* accent = the active thing */
  --cp-accent:#4aa8db; --cp-accent-bright:#5fb8e4; --cp-accent-deep:#0e3a4a;
  --cp-accent-soft:rgba(74,168,219,.14);
  --cp-accent-ring:rgba(74,168,219,.4);
  --cp-on-accent:#04222c;                              /* ink ON accent fills */

  /* gold = something to unlock or mind — FILL and TEXT split by colourway */
  --cp-warn:var(--gold); --cp-warn-soft:rgba(230,169,60,.18);
  --cp-gold-text:#e6a93c;
  --cp-on-gold:#2a1f06;                                /* ink ON a gold fill */

  /* outcomes only, never decoration */
  --cp-ok:#37b07e; --cp-ok-soft:rgba(55,176,126,.16);
  --cp-danger:#e0562f; --cp-danger-soft:rgba(224,86,47,.16);
  /* coral AS TEXT (2026-09-06): the #e0562f fill reads 3.46 on a card and 3.70
   * on dark glass — the smallest lift that clears 4.5 on both is this. Fills
   * keep #e0562f; small text takes --cp-danger-text. */
  --cp-danger-text:#e6795a;
  --cp-info:#4aa8db; --cp-info-soft:rgba(74,168,219,.16);

  /* extra tile hues (DESIGN §1) */
  --cp-tile-studio:#7fc4e8;
  --cp-tile-hearth:#63c79c;
  --cp-tile-rotahr:#9dbb8c;   /* CrewHR sage as rail-chip ink (6.71 on rail) */

  /* rail */
  --cp-rail-bg:#0c2f38; --cp-rail-bg-2:#081f26;
  --cp-rail-text:var(--ink-soft); --cp-rail-text-dim:var(--muted);
  --cp-core:#2e9bc7; --cp-rail-active:#4aa8db;

  /* shadows — the panel shadow is §6b's (a glass panel floats; pair it with
   * --cp-glass-hi), the small one stays for chips and popovers */
  --cp-shadow:0 30px 80px -40px rgba(0,0,0,.75);       /* panel */
  --cp-shadow-sm:0 12px 30px -18px rgba(0,0,0,.7);     /* chip / popover */

  /* overlay layer */
  --cp-scrim:rgba(4,20,26,.6);

  /* 🚦 the traffic-light motif (decoration ONLY — DESIGN §3) */
  --cp-tl-1:#e0562f; --cp-tl-2:#e6a93c; --cp-tl-3:#37b07e;

  /* shape (identical in both modes — DESIGN §2) */
  --cp-radius-tile:24px;      /* module tile */
  --cp-radius:18px;           /* card */
  --cp-radius-sm:12px;        /* inner well */
  --cp-radius-rail:12px;      /* rail item (§6c) */
  --cp-radius-rail-col:22px;  /* the rail column itself (§6c) */
  --cp-radius-tabs:13px;      /* the module tab pill-bar (§6d) */
  --cp-radius-ctl:10px;       /* button / chip */
  --cp-radius-pill:20px;      /* pill */

  /* faces */
  --cp-ui: system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cp-serif: ui-serif,Georgia,"Iowan Old Style","Times New Roman",serif;
  --cp-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ── LIGHT — the toggle's second face; complete override, same jobs ── */
:root[data-theme="light"]{
  color-scheme: light;

  --ground:#f5f3ee; --ground-2:#ece8dc; --ground-wash:#fbf9f4;
  /* --muted was #6b7268 (4.47 on the ground, 4.28 on the well, 4.00 on the
   * coral-warmed corner of the light glass). Deepened the smallest uniform
   * step that clears 4.5 everywhere it is paired (ΔE 3.6), 2026-09-06. */
  --ink:#1d231f; --ink-soft:#3a3f3a; --muted:#636960;
  --line:rgba(29,35,31,.14); --line-soft:rgba(29,35,31,.06);
  --card-hi:#ffffff; --card-lo:#f3eee1;
  --panel:rgba(20,30,25,.03); --panel-hover:rgba(20,30,25,.06);
  --pos:#207552; --neg:#b34322;

  --cp-surface-3:rgba(20,30,25,.04);

  /* the glass layer, light face (DESIGN §6a–§6d) */
  --cp-ground:radial-gradient(900px 620px at 10% 14%, rgba(232,137,46,.42), transparent 62%), radial-gradient(820px 720px at 88% 22%, rgba(74,168,219,.4), transparent 62%), radial-gradient(1100px 760px at 58% 104%, rgba(224,86,47,.3), transparent 62%), linear-gradient(160deg,#f5f3ee,#ece8dc);
  --cp-glass:rgba(255,255,255,.55);
  --cp-glass-border:rgba(255,255,255,.75);
  --cp-glass-blur:blur(28px) saturate(160%);
  --cp-glass-hi:inset 0 1px 0 rgba(255,255,255,.9);
  --cp-chip:rgba(255,255,255,.6); --cp-chip-border:rgba(29,35,31,.1);
  --cp-well:#f3eee1;
  --cp-well-hi:inset 0 0 0 0 transparent;
  /* the light rail needs no extra body: --cp-glass over the light ground's
   * column already reads 15.05 / 10.12 / 5.31 (--ink / --ink-soft / --muted at
   * its lightest point), so the rail's glass IS the card's glass here. */
  --cp-rail-glass:rgba(255,255,255,.55);
  --cp-rail-ink:rgba(29,35,31,.62);
  --cp-rail-on:rgba(29,35,31,.08); --cp-rail-on-hi:inset 0 0 0 0 transparent;
  --cp-fox-glow:0 10px 24px -10px rgba(232,137,46,.8);
  --cp-tab-on:rgba(29,35,31,.08);
  --cp-border-2:rgba(29,35,31,.25);
  --cp-wash-1:rgba(20,30,25,.04);
  --cp-wash-2:rgba(20,30,25,.06);
  --cp-wash-3:rgba(20,30,25,.08);

  --cp-accent:#1e6f8c; --cp-accent-bright:#2a9bb8; --cp-accent-deep:#0e3a4a;
  --cp-accent-soft:rgba(30,111,140,.12);
  --cp-accent-ring:rgba(30,111,140,.35);
  --cp-on-accent:#f5f3ee;

  --cp-warn-soft:rgba(230,169,60,.22);
  --cp-gold-text:#8a5e0b;

  /* outcomes, deepened the smallest step that clears 4.5 on the light glass's
   * darkest point (#f5e3db, the coral-warmed bottom), 2026-09-06:
   * green #217a55 → #207552 (ΔE 2.3, was 4.25) · coral #c74a26 → #b34322
   * (ΔE 7.3, was 3.82). Light coral-as-text is the same value. */
  --cp-ok:#207552; --cp-ok-soft:rgba(32,117,82,.14);
  --cp-danger:#b34322; --cp-danger-soft:rgba(179,67,34,.14);
  --cp-danger-text:#b34322;
  --cp-info:#1e6f8c; --cp-info-soft:rgba(30,111,140,.12);

  --cp-tile-studio:#2a9bb8;
  --cp-tile-hearth:#2e8f66;
  --cp-tile-rotahr:#4a6b3c;   /* deepened sage — 5.67 on the light rail */

  --cp-rail-bg:#faf7ef; --cp-rail-bg-2:#e7e2d2;
  --cp-rail-active:#1e6f8c;

  --cp-shadow:0 24px 60px -34px rgba(29,35,31,.35);
  --cp-shadow-sm:0 8px 30px rgba(20,30,25,.10);

  --cp-scrim:rgba(29,35,31,.35);

  /* the motif follows the outcome hues it borrows (moved with them above) */
  --cp-tl-1:#b34322; --cp-tl-2:#e6a93c; --cp-tl-3:#207552;
}

/* ── THE GLASS PANEL — one shared component (DESIGN §6b) ────────────────────
 * For TOP-LEVEL surfaces only: cards, the rail column, the InkFox bar, modals,
 * the `?` panel, toasts. Wells, table rows, pills and inner cards are NOT glass
 * — they sit on it at --cp-well / --cp-chip so the hierarchy reads. Where
 * backdrop-filter is unsupported the fill alone still reads at these alphas
 * over the gradient; do not raise them to compensate. Radius is the card's;
 * override it for a tile (--cp-radius-tile) or the rail (--cp-radius-rail-col).
 */
.glass{ background:var(--cp-glass); border:1px solid var(--cp-glass-border);
  -webkit-backdrop-filter:var(--cp-glass-blur); backdrop-filter:var(--cp-glass-blur);
  border-radius:var(--cp-radius); box-shadow:var(--cp-shadow), var(--cp-glass-hi); }

/* ── THE CHIP — a small floating pill on or over the glass (§6d) ─────────────
 * The site chip top-right, the "Try" suggestions on the InkFox bar, a status
 * tag. 30px tall; the top-right chrome uses .cp-chip.lg (34px). */
.cp-chip{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px;
  border-radius:15px; background:var(--cp-chip); border:1px solid var(--cp-chip-border);
  font:500 12.5px/1 var(--cp-ui); color:var(--cp-text-2); white-space:nowrap; text-decoration:none; }
.cp-chip.lg{ height:34px; padding:0 14px; border-radius:17px; }
.cp-chip svg{ width:12px; height:12px; flex:none; }
.cp-chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--cp-ok); flex:none; }

/* ── THE MODULE TAB PILL-BAR (§6d) ───────────────────────────────────────────
 *   <nav class="glass cp-tabs"><button class="cp-tab is-on">Overview</button>…</nav>
 */
.cp-tabs{ display:inline-flex; align-items:center; gap:2px; padding:4px; border-radius:var(--cp-radius-tabs); }
.cp-tab{ height:34px; padding:0 14px; border:0; border-radius:var(--cp-radius-ctl); background:transparent;
  display:inline-flex; align-items:center; font:500 13.5px/1 var(--cp-ui); color:var(--cp-text-2); cursor:pointer; }
.cp-tab:hover{ color:var(--cp-text); }
.cp-tab.is-on,.cp-tab[aria-current="page"],.cp-tab[aria-selected="true"]{ background:var(--cp-tab-on); color:var(--cp-text); font-weight:600; }

/* ── 🚦 the family mark — one shared component (DESIGN §3) ──────────────────
 * Three 8px dots, 6px gap, 85% opacity, top-left of a top-level surface card's
 * header row; modals carry them in the title bar. Decoration ONLY: never
 * interactive, never status-bearing, never on nested wells, pills, tiles,
 * modal inner cards or table rows. Markup (always aria-hidden):
 *   <span class="tl-dots" aria-hidden="true"><i></i><i></i><i></i></span>
 */
.tl-dots{ display:inline-flex; gap:6px; align-items:center; flex:none;
  pointer-events:none; user-select:none; }
.tl-dots i{ width:8px; height:8px; border-radius:50%; opacity:.85; }
.tl-dots i:nth-child(1){ background:var(--cp-tl-1); }
.tl-dots i:nth-child(2){ background:var(--cp-tl-2); }
.tl-dots i:nth-child(3){ background:var(--cp-tl-3); }