/* generated: combined theme tokens, data-theme scoped */
/* ═══════════════════════════════════════════════════════ */
/* Benchwright — Theme Tokens                              */
/* ═══════════════════════════════════════════════════════ */
/* Single source of truth for the design tokens used by
   every page. Edit here to retheme the site.

   Loaded server-side before style.css on every page —
   see serveHtml() in website/src/main/kotlin/.../Server.kt.
   Inline <style> blocks across the static HTML pages are
   wired to consume these via var(--…); see the bottom of
   each file's <style> block for the colors it actually
   touches.

   Naming convention:
     --<color>            base hex for the brand/semantic role
     --<color>-bright     a slightly more saturated variant
     --<color>-soft       a slightly muted variant
     --<color>-dim        the canonical low-alpha tint (≈10%)
     --<color>-NN         alpha variant at 0.NN  (e.g. -08 = 8%)
     --<role>-rgb         comma-separated triplet for ad-hoc rgba()

   All hex/rgba values were extracted verbatim from the prior
   palette; nothing has been "unified" yet. To collapse drift
   (e.g. the three different teals in use historically), point
   --teal-77 / --teal-98 at the same hex as --teal here. */
:root,:root[data-theme="dark"] {
  /* ─── Brand teal ─────────────────────────────────── */
  /* Primary teal from logo.svg (rgb 0,206,200).        */
  --teal: #00cec8;
  --teal-bright: #00cec8;
  --teal-soft: #98efff;
  --teal-deep: #3090a0;
  --teal-warm: #4dd0e1;
  --teal-rgb: 0,206,200;

  /* Drift shades. Several near-teals were authored over
     time; exposed as separate vars so a retheme can collapse
     them to one value by editing this file alone. */
  --teal-77-rgb: 77,184,199;
  --teal-98-rgb: 98,212,228;
  --teal-208-rgb: 77,208,225;

  /* Brand alpha tints (canonical, used across components) */
  --teal-dim: rgba(0,206,200,0.10);
  --teal-ghost: rgba(0,206,200,0.05);
  --teal-border: rgba(0,206,200,0.28);
  --teal-08b: rgba(0,206,200,0.08);
  --teal-22: rgba(0,206,200,0.22);
  --teal-50: rgba(0,206,200,0.5);

  --teal-77-04: rgba(77,184,199,0.04);
  --teal-77-05: rgba(77,184,199,0.05);
  --teal-77-06: rgba(77,184,199,0.06);
  --teal-77-08: rgba(77,184,199,0.08);
  --teal-77-25: rgba(77,184,199,0.25);
  --teal-77-50: rgba(77,184,199,0.5);

  --teal-98-04: rgba(98,212,228,0.04);
  --teal-98-05: rgba(98,212,228,0.05);
  --teal-98-08: rgba(98,212,228,0.08);
  --teal-98-12: rgba(98,212,228,0.12);
  --teal-98-15: rgba(98,212,228,0.15);
  --teal-98-22: rgba(98,212,228,0.22);
  --teal-98-35: rgba(98,212,228,0.35);
  --teal-98-40: rgba(98,212,228,0.4);
  --teal-98-50: rgba(98,212,228,0.5);
  --teal-98-60: rgba(98,212,228,0.6);

  /* ─── Surfaces ───────────────────────────────────── */
  --bg: #060b10;
  /* Glass tints over --bg, used by the topbar / footer chrome.   */
  --bg-glass-55: rgba(6,11,16,0.55);
  --bg-glass-70: rgba(6,11,16,0.7);
  --surface: #0a1018;
  --surface-1: #0b121b;
  --surface-2: #0e1620;
  --surface-3: #14202c;
  --surface-deep: #050505;
  --surface-warm: #1a1400;
  --border: #172333;
  --border-glass-60: rgba(23,35,51,0.6);
  --border-light: #1e3040;

  /* ─── Code/diff panel (GitHub-flavored grays) ─────
     Used by dashboard.html / registry.html / admin.html
     when rendering code, diffs, or terminal-style cards. */
  --code-bg: #0e1116;
  --code-bg-2: #0d1117;
  --code-bg-3: #161b22;
  --code-text: #c9d1d9;
  --code-text-2: #8b949e;
  --code-mono: #d4d4d4;
  --code-border: #2d2d2d;
  --code-mute: #8a8a8a;

  /* ─── Text ───────────────────────────────────────── */
  --text: #e0eaf2;
  --text-2: #a0b8cc;
  --text-3: #7e95ad;
  --text-on-brand: #ffffff;

  /* ─── Accent — amber (marketing spotlight) ────────────
     The one "pop" hue on marketing surfaces (see /docs/admin/palette).
     Was hard-coded #f5a36b across the landing; now tokenized so light
     mode can deepen it (a pale peach reads as washed-out on cream). */
  --amber: #f5a36b;
  --amber-bright: #f7b489;
  --amber-rgb: 245,163,107;
  --amber-dim: rgba(245,163,107,0.14);
  --amber-border: rgba(245,163,107,0.40);

  /* ─── Semantic — green ───────────────────────────── */
  --green: #40d888;
  --green-bright: #6bd77a;
  --green-soft: #7fcf8f;
  --green-mute: #59c98b;
  --green-mossy: #6fc59b;
  --green-dim: rgba(64,216,136,0.10);
  --green-08: rgba(64,216,136,0.08);
  --green-25: rgba(64,216,136,0.25);
  --green-28: rgba(64,216,136,0.28);
  --green-leaf-10: rgba(107,215,122,0.10);
  --green-40: rgba(64,216,136,0.4);
  --green-50: rgba(64,216,136,0.5);
  --green-60: rgba(64,216,136,0.6);
  --green-45: rgba(64,216,136,0.45);
  --green-mossy-08: rgba(108,216,158,0.08);
  /* Tailwind-style green (used in registry chips) */
  --green-tw: #22c55e;
  --green-tw-16: rgba(34,197,94,0.16);
  --green-tw-30: rgba(34,197,94,0.3);
  --green-leaf-30: rgba(74,222,128,0.3);

  /* ─── Semantic — red ─────────────────────────────── */
  --red: #e06060;
  --red-soft: #e5756e;
  --red-pink: #f3a2a2;
  --red-bright: #ed5757;
  --red-bright-2: #ff8585;
  --red-warm: #ff6b6b;
  --red-glass: #ffb0b0;
  --red-dim: rgba(224,96,96,0.10);
  --red-08: rgba(224,96,96,0.08);
  --red-18: rgba(224,96,96,0.18);
  --red-28: rgba(224,96,96,0.28);
  --red-soft-10: rgba(229,117,110,0.10);
  --red-vivid-12: rgba(255,80,80,0.12);
  --red-pulse-12: rgba(220,86,86,0.15);
  --red-pulse-35: rgba(220,86,86,0.35);
  --red-edge-08: rgba(237,87,87,0.08);
  --red-edge-16: rgba(237,87,87,0.16);
  --red-edge-22: rgba(237,87,87,0.22);
  --red-edge-40: rgba(237,87,87,0.4);

  /* ─── Semantic — yellow / orange ─────────────────── */
  --yellow: #e0c848;
  --yellow-warm: #f0c455;
  --yellow-bright: #ffe079;
  --yellow-amber: #f0b429;
  --yellow-dim: rgba(224,200,72,0.10);
  --yellow-05: rgba(224,200,72,0.05);
  --yellow-30: rgba(224,200,72,0.3);
  --orange: #e0a050;
  --orange-soft: #e0b050;
  --orange-warm: #f5b041;
  --orange-bright: #f5aa3c;
  --orange-glow: #ffd270;
  --orange-skin: #e0a85a;
  --orange-06: rgba(224,160,80,0.06);
  --orange-dim: rgba(224,160,80,0.14);
  --orange-25: rgba(224,160,80,0.25);
  --orange-30: rgba(224,160,80,0.30);
  --orange-35: rgba(224,160,80,0.35);

  /* ─── Semantic — blue / purple ───────────────────── */
  --blue: #5ba8e8;
  --blue-sky: #38bdf8;
  --blue-12: rgba(91,168,232,0.12);
  --blue-30: rgba(91,168,232,0.3);
  --blue-sky-01: rgba(56,189,248,0.01);
  --blue-sky-05: rgba(56,189,248,0.05);
  --blue-pop-08: rgba(100,180,255,0.08);
  --blue-haze-45: rgba(125,211,252,0.45);
  --blue-haze-00: rgba(125,211,252,0);
  --purple: #9888e0;
  --purple-light: #b39dff;
  --purple-pink: #e2adf2;
  --purple-10: rgba(152,136,224,0.10);
  --purple-12: rgba(152,136,224,0.12);
  --purple-16: rgba(152,136,224,0.16);
  --purple-20: rgba(155,138,232,0.20);
  --purple-10b: rgba(155,138,232,0.10);
  --purple-35: rgba(152,136,224,0.35);

  /* ─── Status: degraded (used by footer status pill) ─ */
  --status-degraded: #f5aa3c;

  /* ─── Neutral overlays ───────────────────────────── */
  --black-20: rgba(0,0,0,0.2);
  --black-25: rgba(0,0,0,0.25);
  --black-35: rgba(0,0,0,0.35);
  --black-40: rgba(0,0,0,0.4);
  --black-45: rgba(0,0,0,0.45);
  --black-50: rgba(0,0,0,0.5);
  --black-60: rgba(0,0,0,0.6);
  --bg-glass-60: rgba(8,14,20,0.6);
  --bg-glass-35: rgba(16,22,30,0.35);
  --white-00: rgba(255,255,255,0);
  --white-02: rgba(255,255,255,0.02);
  --white-03: rgba(255,255,255,0.03);
  --white-04: rgba(255,255,255,0.04);
  --white-05: rgba(255,255,255,0.05);
  --white-06: rgba(255,255,255,0.06);
  --white-07: rgba(255,255,255,0.07);
  --white-10: rgba(255,255,255,0.1);

  /* ─── Typography ─────────────────────────────────── */
  --font: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;

  /* ─── Radii ──────────────────────────────────────────
     Both themes ship the rectangular radii at 0 so the
     flat aesthetic is the global default; only
     pills and circles stay round. To restore the legacy
     rounded look in dark mode, set the rectangular slots
     back to 10/6/12/14 here and stop injecting style-flat
     in Server.kt. */
  --radius-2xs: 0;
  --radius-xs: 0;
  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-circle: 50%;
  --radius-pill: 0;        /* flat aesthetic — pills are square too */
}

/* ═══════════════════════════════════════════════════════ */
/* Benchwright — Light Theme                               */
/* ═══════════════════════════════════════════════════════ */
/* A clean, cool, flat light theme:
     · Canvas is white #FFFFFF; panels/cards sit on it as very
       light, faintly-cool grey tiles (--surface #F6F8FA), with a
       cooler-grey ramp for insets nested inside them. Cool-neutral
       to echo the dark theme's blue-black rather than warm cream.
     · Dark cool-slate text (#1B232E), not pure black, down a
       slate-grey secondary/tertiary ramp.
     · Three accents, deepened so they hold contrast on light:
       teal #00756D, amber #C25410, green #67AE00 — see
       /docs/admin/palette.
     · Flat: no border-radius outside pill badges; no shadows,
       glows, or drop-shadows. Depth comes from surface-color
       variation (bg ↔ surface-1 ↔ surface) + cool hairlines.
     · Monospace uppercase for nav links + buttons + CTAs.

   Selected by the BW_THEME env var (default "dark") or the
   bw_theme cookie; Server.kt routes /theme.css + the themed
   /logo.svg + /wordmark.svg here when light. */
:root[data-theme="light"] {
  /* ─── Brand teal ─────────────────────────────────────
     Single foreground-safe teal: deep `#00756d` (~6.8:1 on
     cream — AAA for body text). The dark theme defines a
     brighter cyan glow (`#00cec8`) under the same tokens; on
     cream that glow falls under 2:1 and fails as a text/border
     color, so this file pins every "accent teal" token to the
     deep value. That way `color: var(--teal-bright)` —
     scattered across ~270 places sitewide — becomes AAA in one
     stroke without touching individual selectors.

     Backgrounds that use `--teal-bright` (CTA fills, 3px tabs,
     small status dots) shift from cyan to deep teal under this
     change. That's the desired direction in light mode: the
     primary CTA goes from cream-on-cyan (~1.7:1) to cream-on-
     deep-teal (~6.8:1). Glow effects, when they exist, are
     suppressed in this theme anyway (see the no-shadow comment
     at the file head). */
  --teal: #00756d;
  --teal-bright: #00756d;
  --teal-soft: #b5fff7;
  --teal-deep: #003d3a;
  --teal-warm: #00756d;
  --teal-rgb: 0,117,109;

  /* Drift triplets — same as dark. They surface only as
     low-alpha tints, which read as soft washes on cream. */
  --teal-77-rgb: 77,184,199;
  --teal-98-rgb: 98,212,228;
  --teal-208-rgb: 77,208,225;

  /* Brand alpha tints. Higher alphas vs. dark mode so chip
     backgrounds remain visible against the cream canvas. */
  --teal-dim: rgba(0,206,200,0.14);
  --teal-ghost: rgba(0,206,200,0.07);
  --teal-border: rgba(0,117,109,0.40);
  --teal-08b: rgba(0,206,200,0.12);
  --teal-22: rgba(0,117,109,0.22);
  --teal-50: rgba(0,117,109,0.50);

  --teal-77-04: rgba(77,184,199,0.10);
  --teal-77-05: rgba(77,184,199,0.12);
  --teal-77-06: rgba(77,184,199,0.14);
  --teal-77-08: rgba(77,184,199,0.16);
  --teal-77-25: rgba(77,184,199,0.32);
  --teal-77-50: rgba(0,117,109,0.48);

  --teal-98-04: rgba(98,212,228,0.16);
  --teal-98-05: rgba(98,212,228,0.18);
  --teal-98-08: rgba(98,212,228,0.22);
  --teal-98-12: rgba(98,212,228,0.26);
  --teal-98-15: rgba(98,212,228,0.30);
  --teal-98-22: rgba(0,117,109,0.30);
  --teal-98-35: rgba(0,117,109,0.42);
  --teal-98-40: rgba(0,117,109,0.48);
  --teal-98-50: rgba(0,117,109,0.55);
  --teal-98-60: rgba(0,117,109,0.62);

  /* ─── Surfaces — white canvas, cool-grey panels ──────────
     Clean white page; panels/cards sit on it as very light,
     faintly-cool grey tiles (--surface), with a cooler-grey ramp
     for insets nested inside them. Cool-neutral to echo the dark
     theme's blue-black, separated by soft cool hairline borders. */
  --bg: #ffffff;
  --bg-glass-55: rgba(255,255,255,0.85);
  --bg-glass-70: rgba(255,255,255,0.92);
  --surface: #f6f8fa;
  --surface-1: #eef1f5;
  --surface-2: #e4e9ef;
  --surface-3: #d3dbe3;
  --surface-deep: #eef1f5;
  --surface-warm: #f2f5f8;
  --border: #e3e8ee;
  --border-glass-60: rgba(205,214,223,0.6);
  --border-light: #cfd8e1;

  /* ─── Code panel ─────────────────────────────────────── */
  /* Code/terminal blocks — a cool-grey inset so they read as
     code panels against the lighter cards they sit in. */
  --code-bg: #eef1f5;
  --code-bg-2: #f6f8fa;
  --code-bg-3: #e4e9ef;
  --code-text: #1b232e;
  --code-text-2: #576270;
  --code-mono: #1b232e;
  --code-border: #e3e8ee;
  --code-mute: #8892a0;

  /* ─── Text — dark cool slate on white ────────────────── */
  --text: #1b232e;
  --text-2: #576270;
  --text-3: #8892a0;
  --text-on-brand: #ffffff;

  /* ─── Accent — amber (marketing spotlight) ────────────
     Light-mode amber is deepened to a burnt amber. The dark theme's
     peachy #f5a36b (tuned to glow on near-black) washes out to ~2:1 on
     the cream canvas — unreadable as text and limp as a CTA fill. This
     burnt value is ~4.5:1 on cream (AA for the bold headline words /
     pop numbers it's used for) while keeping cream text on an amber CTA
     legible. Same three-slot shape as --teal so the migration is a swap. */
  --amber: #c25410;
  --amber-bright: #d96818;
  --amber-rgb: 194,84,16;
  --amber-dim: rgba(194,84,16,0.13);
  --amber-border: rgba(194,84,16,0.45);

  /* ─── Semantic — status colors (deepened for cream) ─ */
  --green: #67ae00;
  --green-bright: #67ae00;
  --green-soft: #c5f184;
  --green-mute: #4a7d00;
  --green-mossy: #2f5000;
  --green-dim: rgba(103,174,0,0.14);
  --green-08: rgba(103,174,0,0.10);
  --green-25: rgba(103,174,0,0.22);
  --green-28: rgba(103,174,0,0.26);
  --green-leaf-10: rgba(103,174,0,0.14);
  --green-40: rgba(103,174,0,0.32);
  --green-50: rgba(103,174,0,0.42);
  --green-60: rgba(103,174,0,0.50);
  --green-45: rgba(103,174,0,0.36);
  --green-mossy-08: rgba(103,174,0,0.10);
  --green-tw: #67ae00;
  --green-tw-16: rgba(103,174,0,0.20);
  --green-tw-30: rgba(103,174,0,0.32);
  --green-leaf-30: rgba(103,174,0,0.32);

  --red: #ff2e2e;
  --red-soft: #ff5454;
  --red-pink: #ff9494;
  --red-bright: #ff2e2e;
  --red-bright-2: #ff5454;
  --red-warm: #ff2e2e;
  --red-glass: #ffcfcf;
  --red-dim: rgba(255,46,46,0.10);
  --red-08: rgba(255,46,46,0.08);
  --red-18: rgba(255,46,46,0.16);
  --red-28: rgba(255,46,46,0.22);
  --red-soft-10: rgba(255,46,46,0.10);
  --red-vivid-12: rgba(255,46,46,0.14);
  --red-pulse-12: rgba(255,46,46,0.14);
  --red-pulse-35: rgba(255,46,46,0.32);
  --red-edge-08: rgba(255,46,46,0.10);
  --red-edge-16: rgba(255,46,46,0.16);
  --red-edge-22: rgba(255,46,46,0.22);
  --red-edge-40: rgba(255,46,46,0.40);

  /* The accent yellow #FEFF5E is too pale for text;
     we use it as a highlighter bg and a darker amber for
     readable yellow text. */
  --yellow: #b8a700;
  --yellow-warm: #ff8040;
  --yellow-bright: #feff5e;
  --yellow-amber: #b8a700;
  --yellow-dim: rgba(184,167,0,0.14);
  --yellow-05: rgba(184,167,0,0.07);
  --yellow-30: rgba(184,167,0,0.30);
  --orange: #ff8040;
  --orange-soft: #ff8040;
  --orange-warm: #ff8040;
  --orange-bright: #ff8040;
  --orange-glow: #ffb380;
  --orange-skin: #ff8040;
  --orange-06: rgba(255,128,64,0.10);
  --orange-dim: rgba(255,128,64,0.16);
  --orange-25: rgba(255,128,64,0.24);
  --orange-30: rgba(255,128,64,0.30);
  --orange-35: rgba(255,128,64,0.34);

  --blue: #286fe8;
  --blue-sky: #286fe8;
  --blue-12: rgba(40,111,232,0.14);
  --blue-30: rgba(40,111,232,0.30);
  --blue-sky-01: rgba(40,111,232,0.04);
  --blue-sky-05: rgba(40,111,232,0.10);
  --blue-pop-08: rgba(40,111,232,0.12);
  --blue-haze-45: rgba(40,111,232,0.40);
  --blue-haze-00: rgba(40,111,232,0);
  --purple: #6c0081;
  --purple-light: #9333ea;
  --purple-pink: #c084fc;
  --purple-10: rgba(108,0,129,0.10);
  --purple-12: rgba(108,0,129,0.12);
  --purple-16: rgba(108,0,129,0.16);
  --purple-20: rgba(108,0,129,0.20);
  --purple-10b: rgba(108,0,129,0.10);
  --purple-35: rgba(108,0,129,0.32);

  --status-degraded: #ff8040;

  /* ─── Neutral overlays (warm) ────────────────────────── */
  --black-20: rgba(0,0,0,0.04);
  --black-25: rgba(0,0,0,0.06);
  --black-35: rgba(0,0,0,0.08);
  --black-40: rgba(0,0,0,0.10);
  --black-45: rgba(0,0,0,0.12);
  --black-50: rgba(0,0,0,0.14);
  --black-60: rgba(0,0,0,0.18);
  --bg-glass-60: rgba(255,255,255,0.85);
  --bg-glass-35: rgba(247,246,239,0.65);
  --white-00: rgba(0,0,0,0);
  --white-02: rgba(0,0,0,0.02);
  --white-03: rgba(0,0,0,0.03);
  --white-04: rgba(0,0,0,0.04);
  --white-05: rgba(0,0,0,0.05);
  --white-06: rgba(0,0,0,0.06);
  --white-07: rgba(0,0,0,0.07);
  --white-10: rgba(0,0,0,0.08);

  /* ─── Typography ─────────────────────────────────────── */
  --font: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;

  /* ─── Radii — zero on rectangles (flat) ───────────────
     Same eight slots as theme-dark.css. Rectangular radii
     all collapse to 0 for the flat-square look.
     Pills and circles stay round so status dots, avatars,
     and badge indicators don't turn into squares — those
     are intentionally pill/round here too. */
  --radius-2xs: 0;
  --radius-xs: 0;
  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --radius-xl: 0;
  --radius-circle: 50%;
  --radius-pill: 0;        /* flat aesthetic — pills are square too */
}

/* The flat-aesthetic component overrides used to
   live here; they now apply to both themes via style-flat.css
   (loaded after theme.css on every page). Edit that file to
   tune the flat treatment globally. */