/*
  DESIGN TOKENS — primitives -> semantic (MD3 sys-color) -> component -> glass.

  Visual language: the Harness system, extracted from its shipped
  stylesheet.  Depth comes from TRANSLUCENT WHITE LAYERS over the page —
  never from opaque gray panels — frosted by a 12px backdrop blur; borders
  are hairlines (blue-tinted in light, white-alpha in dark); the primary CTA
  is an ink pill in light mode and a white pill in dark mode with brand blue
  (#4d6bfe / #6799fe) reserved for links, accents, and focus.  Dark is the
  default: a near-black #0a0a0a canvas under a steel-blue aurora.  Type:
  Inter for UI, Roboto Mono for code (self-hosted; runtime touches no CDN).

  Layer law (test-enforced): raw values live ONLY in this file's primitives.
  Semantic tokens reference primitives by name; components/glass reference
  semantic tokens.  [data-theme] rebinds only the semantic + depth layers.
*/

/* =========================================================================
   0. FONTS  (self-hosted; runtime touches no CDN)
   Inter (UI, one variable file served per weight), Roboto Mono (code),
   Material Symbols Rounded (icon font).  Latin subsets only.
   ========================================================================= */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/Inter.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/Inter.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/static/fonts/Inter.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/static/fonts/Inter.woff2) format("woff2");
}
@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/RobotoMono-400.woff2) format("woff2");
}
@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/static/fonts/RobotoMono-500.woff2) format("woff2");
}
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/static/fonts/MaterialSymbolsRounded.woff2) format("woff2");
}

/* =========================================================================
   1. PRIMITIVES  (raw values; the only hex in the whole frontend)

   Two ramps mirroring the Harness site: LIGHT (#f9f8f8 warm-neutral page,
   ink text, translucent white surfaces) and NIGHT (#0a0a0a page, white
   text, layered white-alpha surfaces).  Semantic tokens below reference
   these by name; nothing else uses raw values.
   ========================================================================= */
:root {
  /* --- Light neutrals (warm-neutral, like --color-bg-page #f9f8f8) --- */
  --p-canvas:        #f9f8f8;   /* page canvas */
  --p-surface:       #ffffff;   /* solid white where glass would wash out (fields, dialogs) */
  --p-surf-1:        #f4f4f3;   /* surface-container      (~ rgba(0,0,0,.03) over canvas) */
  --p-surf-2:        #ececeb;   /* surface-container-high (~ rgba(0,0,0,.05)) */
  --p-surf-3:        #e3e3e1;   /* surface-container-highest */
  --p-on-surface:    #1e232c;   /* primary text (text-primary) */
  --p-on-surf-var:   rgba(0, 0, 0, 0.70);   /* secondary text (text-secondary) */
  --p-mid-gray:      #8691a1;   /* tertiary / placeholder (text-placeholder) */
  --p-outline:       rgba(0, 0, 0, 0.10);   /* border-default */
  --p-outline-var:   rgba(0, 0, 0, 0.06);   /* border-subtle */

  /* --- Brand blue + ink CTA pair --- */
  --p-brand:         #4d6bfe;   /* color-brand */
  --p-brand-on:      #ffffff;
  --p-brand-soft:    #eef1fe;   /* primary-container: pale blue */
  --p-brand-soft-on: #234792;   /* text-link-blue */
  --p-brand-mid:     #a5b8ff;   /* tertiary-container / tag fill */

  /* The harness light-mode CTA is INK, not blue (btn-primary). */
  --p-ink:           #1a1615;   /* static-black */
  --p-ink-on:        #ffffff;

  /* --- Secondary (cool slate) --- */
  --p-sec:           #5b6472;
  --p-sec-on:        #ffffff;
  --p-sec-soft:      #eef1f6;
  --p-sec-soft-on:   #3d4351;

  /* --- Tertiary (cyan — active/progress states) --- */
  --p-cyan:          #0e7490;
  --p-cyan-on:       #ffffff;
  --p-cyan-soft:     #e0f2fa;
  --p-cyan-soft-on:  #155e75;

  /* --- Status --- */
  --p-red:           #dc2626;
  --p-red-on:        #ffffff;
  --p-red-soft:      #fee2e2;
  --p-red-soft-on:   #991b1b;

  --p-green:         #0e9f6e;
  --p-green-on:      #ffffff;
  --p-green-soft:    #def7ec;
  --p-green-soft-on: #046c4e;

  /* --- Categorical data palette (cool-leaning, chromatic order) --- */
  --p-cat-blue:        #4d6bfe; --p-cat-blue-soft:        #eef1fe; --p-cat-blue-on:  #253a9e;
  --p-cat-teal:        #0d9488; --p-cat-teal-soft:        #e0f5f2; --p-cat-teal-on:  #0a3d38;
  --p-cat-indigo:      #6366f1; --p-cat-indigo-soft:      #eceefe; --p-cat-indigo-on: #312e81;
  --p-cat-cyan:        #0891b2; --p-cat-cyan-soft:        #e0f2fa; --p-cat-cyan-on:  #155e75;
  --p-cat-green:       #10b981; --p-cat-green-soft:       #e6f7ef; --p-cat-green-on: #065f46;
  --p-cat-purple:      #8b5cf6; --p-cat-purple-soft:      #f3eefe; --p-cat-purple-on: #4c1d95;
  --p-cat-pink:        #ec4899; --p-cat-pink-soft:        #fdeef5; --p-cat-pink-on:  #831843;
  --p-cat-amber:       #d97706; --p-cat-amber-soft:       #fdf3e3; --p-cat-amber-on: #78350f;
  --p-cat-rose:        #f43f5e; --p-cat-rose-soft:        #ffe9ed; --p-cat-rose-on:  #881337;

  --p-cat-growth:      #10b981; --p-cat-growth-soft:      #e6f7ef; --p-cat-growth-on: #065f46;

  /* --- Night neutrals (#0a0a0a page; surfaces are white-alpha LAYERS,
         exactly the harness dark ramp hsla(0,0%,100%,.02-.25)) --- */
  --p-d-canvas:      #0a0a0a;                 /* bg-page dark */
  --p-d-surface:     rgba(255, 255, 255, 0.06);   /* bg-surface-1 */
  --p-d-surf-1:      rgba(255, 255, 255, 0.04);   /* bg-surface-2 */
  --p-d-surf-2:      rgba(255, 255, 255, 0.08);   /* bg-input level */
  --p-d-surf-3:      rgba(255, 255, 255, 0.12);   /* bg-surface-5 */
  --p-d-on-surface:  #ffffff;                 /* text-primary dark */
  --p-d-on-surf-var: rgba(255, 255, 255, 0.80);   /* text-secondary dark */
  --p-d-mid-gray:    rgba(255, 255, 255, 0.50);   /* text-description dark */
  --p-d-outline:     rgba(255, 255, 255, 0.24);   /* border-strong dark */
  --p-d-outline-var: rgba(255, 255, 255, 0.08);   /* border-subtle dark */

  /* --- Night brand + inverted CTA pair (dark-mode CTA is WHITE) --- */
  --p-d-brand:       #6799fe;   /* color-brand dark */
  --p-d-brand-on:    #0a1230;
  --p-d-brand-soft:  #1c2752;   /* deep navy container */
  --p-d-brand-soft-on: #b8c6ff;
  --p-d-brand-mid:   #3a4a8f;

  --p-d-ink:         #ffffff;   /* btn-primary-bg dark */
  --p-d-ink-on:      #0a0a0a;   /* btn-primary-text dark */

  --p-d-sec:         #aab2c0;
  --p-d-sec-soft:    rgba(255, 255, 255, 0.06);
  --p-d-sec-soft-on: rgba(255, 255, 255, 0.85);

  --p-d-cyan:        #38b6dd;
  --p-d-cyan-soft:   rgba(12, 45, 61, 0.85);
  --p-d-cyan-soft-on:#9fdcf2;

  --p-d-red:         #f87171;
  --p-d-red-soft:    rgba(63, 29, 29, 0.85);
  --p-d-red-soft-on: #fecaca;

  --p-d-green:       #34d399;
  --p-d-green-soft:  rgba(18, 53, 41, 0.85);
  --p-d-green-soft-on:#a7f3d0;

  /* --- Dark categorical data palette ---
     Each hue ships a DARK container: muted dark fill + light on-color text.
     Same hue, legible on night surfaces. */
  --p-d-cat-blue-soft:   #1c2752;  --p-d-cat-blue-on:   #b8c6ff;
  --p-d-cat-teal-soft:   #0a3d38;  --p-d-cat-teal-on:   #80e0d6;
  --p-d-cat-indigo-soft: #2a2a5c;  --p-d-cat-indigo-on: #c0c0ee;
  --p-d-cat-cyan-soft:   #0c2d3d;  --p-d-cat-cyan-on:   #9fdcf2;
  --p-d-cat-green-soft:  #0d3a26;  --p-d-cat-green-on:  #a8e8c4;
  --p-d-cat-purple-soft: #3c1a5c;  --p-d-cat-purple-on: #d8b8ec;
  --p-d-cat-pink-soft:   #5c1a3c;  --p-d-cat-pink-on:   #f0b8d0;
  --p-d-cat-amber-soft:  #5a3a00;  --p-d-cat-amber-on:  #ffd98a;
  --p-d-cat-rose-soft:   #5c1a26;  --p-d-cat-rose-on:   #f0a8b8;

  --p-d-cat-growth-soft: #0a3d28;  --p-d-cat-growth-on: #80e8b8;

  /* --- Motion + shape + spacing + type (non-color primitives) --- */
  --p-ease-emph: cubic-bezier(0.2, 0, 0, 1);
  --p-ease-std: cubic-bezier(0.2, 0, 0, 0);
  --p-dur-micro: 150ms;
  --p-dur-std: 200ms;
  --p-dur-complex: 300ms;
  --p-dur-max: 400ms;

  --p-shape-xs: 4px;
  --p-shape-sm: 8px;
  --p-shape-md: 12px;
  --p-shape-lg: 16px;
  --p-shape-xl: 24px;      /* radius-card */
  --p-shape-full: 999px;   /* radius-pill */

  --p-space-1: 4px;
  --p-space-2: 8px;
  --p-space-3: 12px;
  --p-space-4: 16px;
  --p-space-5: 24px;
  --p-space-6: 32px;
  --p-space-7: 48px;

  --p-font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --p-font-mono: "Roboto Mono", ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --p-font-symbols: "Material Symbols Rounded";

  --p-icon-sm: 16px;
  --p-icon-md: 20px;
  --p-icon-lg: 24px;

  /* Ambient elevation. Light mirrors shadow-card: hairline ring + two
     quiet drops. Dark needs almost none — the inset top-highlight in the
     depth layer does the work. */
  --p-elev-1: 0 2px 4px rgba(0, 0, 0, 0.05), 0 12px 24px rgba(0, 0, 0, 0.05);
  --p-elev-2: 0 2px 4px rgba(0, 0, 0, 0.05), 0 16px 32px rgba(0, 0, 0, 0.07);
  --p-elev-3: 0 4px 8px rgba(0, 0, 0, 0.06), 0 20px 40px rgba(0, 0, 0, 0.10);
  --p-elev-4: 0 8px 16px rgba(0, 0, 0, 0.08), 0 28px 56px rgba(0, 0, 0, 0.14);
  --p-elev-5: 0 12px 24px rgba(0, 0, 0, 0.10), 0 36px 72px rgba(0, 0, 0, 0.18);
}

/* Night elevation rebind (black drops only; layers carry their own light) */
[data-theme="dark"] {
  --p-elev-1: 0 8px 24px rgba(0, 0, 0, 0.35);
  --p-elev-2: 0 12px 32px rgba(0, 0, 0, 0.40);
  --p-elev-3: 0 16px 40px rgba(0, 0, 0, 0.46);
  --p-elev-4: 0 20px 56px rgba(0, 0, 0, 0.55);
  --p-elev-5: 0 28px 72px rgba(0, 0, 0, 0.62);
}

/* =========================================================================
   2. SEMANTIC  (MD3 sys-color; theme-switchable)

   DARK is the default (the Harness site is a dark-first product): the
   no-attribute root matches night so the pre-JS flash is already dark.
   app.js applyTheme() sets data-theme from the persisted preference.
   ========================================================================= */

/* Night (default — near-black canvas, white-alpha layers, white CTA) */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --md-sys-color-primary: var(--p-d-brand);
  --md-sys-color-on-primary: var(--p-d-brand-on);
  --md-sys-color-primary-container: var(--p-d-brand-soft);
  --md-sys-color-on-primary-container: var(--p-d-brand-soft-on);

  --md-sys-color-secondary: var(--p-d-sec);
  --md-sys-color-on-secondary: var(--p-d-ink-on);
  --md-sys-color-secondary-container: var(--p-d-sec-soft);
  --md-sys-color-on-secondary-container: var(--p-d-sec-soft-on);

  --md-sys-color-tertiary: var(--p-d-cyan);
  --md-sys-color-on-tertiary: var(--p-d-ink-on);
  --md-sys-color-tertiary-container: var(--p-d-cyan-soft);
  --md-sys-color-on-tertiary-container: var(--p-d-cyan-soft-on);

  --md-sys-color-error: var(--p-d-red);
  --md-sys-color-on-error: var(--p-d-ink-on);
  --md-sys-color-error-container: var(--p-d-red-soft);
  --md-sys-color-on-error-container: var(--p-d-red-soft-on);

  --md-sys-color-success: var(--p-d-green);
  --md-sys-color-on-success: var(--p-d-ink-on);
  --md-sys-color-success-container: var(--p-d-green-soft);
  --md-sys-color-on-success-container: var(--p-d-green-soft-on);

  --md-sys-color-surface: var(--p-d-surface);
  --md-sys-color-surface-container-low: var(--p-d-canvas);
  --md-sys-color-surface-container: var(--p-d-surf-1);
  --md-sys-color-surface-container-high: var(--p-d-surf-2);
  --md-sys-color-surface-container-highest: var(--p-d-surf-3);
  --md-sys-color-on-surface: var(--p-d-on-surface);
  --md-sys-color-on-surface-variant: var(--p-d-on-surf-var);

  --md-sys-color-outline: var(--p-d-outline);
  --md-sys-color-outline-variant: var(--p-d-outline-var);

  --md-sys-color-scrim: rgba(0, 0, 0, 0.60);
  --md-sys-color-state-hover: rgba(255, 255, 255, 0.06);
  --md-sys-color-state-focus: rgba(103, 153, 254, 0.18);
  --md-sys-color-state-pressed: rgba(255, 255, 255, 0.10);
  --md-sys-color-skeleton-from: var(--p-d-surf-1);
  --md-sys-color-skeleton-to: var(--p-d-surf-2);
}

/* Light (opt-in via [data-theme="light"]; later in the file so it wins the
   cascade on <html> exactly when the attribute is present) */
[data-theme="light"] {
  color-scheme: light;
  --md-sys-color-primary: var(--p-brand);
  --md-sys-color-on-primary: var(--p-brand-on);
  --md-sys-color-primary-container: var(--p-brand-soft);
  --md-sys-color-on-primary-container: var(--p-brand-soft-on);

  --md-sys-color-secondary: var(--p-sec);
  --md-sys-color-on-secondary: var(--p-sec-on);
  --md-sys-color-secondary-container: var(--p-sec-soft);
  --md-sys-color-on-secondary-container: var(--p-sec-soft-on);

  --md-sys-color-tertiary: var(--p-cyan);
  --md-sys-color-on-tertiary: var(--p-cyan-on);
  --md-sys-color-tertiary-container: var(--p-cyan-soft);
  --md-sys-color-on-tertiary-container: var(--p-cyan-soft-on);

  --md-sys-color-error: var(--p-red);
  --md-sys-color-on-error: var(--p-red-on);
  --md-sys-color-error-container: var(--p-red-soft);
  --md-sys-color-on-error-container: var(--p-red-soft-on);

  --md-sys-color-success: var(--p-green);
  --md-sys-color-on-success: var(--p-green-on);
  --md-sys-color-success-container: var(--p-green-soft);
  --md-sys-color-on-success-container: var(--p-green-soft-on);

  --md-sys-color-surface: var(--p-surface);
  --md-sys-color-surface-container-low: var(--p-canvas);
  --md-sys-color-surface-container: var(--p-surf-1);
  --md-sys-color-surface-container-high: var(--p-surf-2);
  --md-sys-color-surface-container-highest: var(--p-surf-3);
  --md-sys-color-on-surface: var(--p-on-surface);
  --md-sys-color-on-surface-variant: var(--p-on-surf-var);

  --md-sys-color-outline: var(--p-outline);
  --md-sys-color-outline-variant: var(--p-outline-var);

  --md-sys-color-scrim: rgba(20, 22, 28, 0.32);
  --md-sys-color-state-hover: rgba(0, 0, 0, 0.04);
  --md-sys-color-state-focus: rgba(77, 107, 254, 0.14);
  --md-sys-color-state-pressed: rgba(0, 0, 0, 0.08);
  --md-sys-color-skeleton-from: var(--p-surf-1);
  --md-sys-color-skeleton-to: var(--p-surf-2);
}

/* Typescale (HEAD stack: Inter everywhere, medium-not-bold chrome).
   Weight never above 600. */
:root {
  --md-sys-typescale-display: 500 36px/44px var(--p-font-ui);   /* big KPI numbers */
  --md-sys-typescale-headline: 500 22px/28px var(--p-font-ui);  /* page titles */
  --md-sys-typescale-title: 500 16px/22px var(--p-font-ui);     /* section titles */
  --md-sys-typescale-title-large: 500 18px/24px var(--p-font-ui);
  --md-sys-typescale-body: 400 14px/20px var(--p-font-ui);
  --md-sys-typescale-body-large: 400 15px/22px var(--p-font-ui);
  --md-sys-typescale-label: 400 13px/18px var(--p-font-ui);
  --md-sys-typescale-mono: 400 12px/18px var(--p-font-mono);
  --md-sys-typescale-stat: 500 32px/40px var(--p-font-ui);
}

/* =========================================================================
   3. COMPONENT  (purpose aliases; what components read)
   These only re-bind semantic tokens to a purpose. The filled-control pair
   (--btn-filled-*) deliberately does NOT follow --primary: the Harness CTA
   is ink-on-light / white-on-dark, while brand blue keeps links & accents.
   ========================================================================= */
:root {
  /* Buttons */
  --btn-filled-bg: var(--p-d-ink);          /* white pill on night (default theme) */
  --btn-filled-fg: var(--p-d-ink-on);
  --btn-tonal-bg: var(--md-sys-color-secondary-container);
  --btn-tonal-fg: var(--md-sys-color-on-secondary-container);
  --btn-outline-fg: var(--md-sys-color-on-surface);
  --btn-danger-bg: var(--md-sys-color-error-container);
  --btn-danger-fg: var(--md-sys-color-on-error-container);
  --btn-ghost-fg: var(--md-sys-color-on-surface);
  --btn-focus-ring: var(--md-sys-color-primary);

  /* Card */
  --card-bg: var(--md-sys-color-surface-container);
  --card-bg-hover: var(--md-sys-color-surface-container-high);
  --card-fg: var(--md-sys-color-on-surface);
  --card-subtle: var(--md-sys-color-on-surface-variant);
  --card-border: var(--md-sys-color-outline-variant);

  /* Chip */
  --chip-bg: var(--md-sys-color-secondary-container);
  --chip-fg: var(--md-sys-color-on-secondary-container);
  --chip-filter-bg: var(--md-sys-color-surface-container-high);

  /* Field */
  --field-bg: var(--md-sys-color-surface);
  --field-fg: var(--md-sys-color-on-surface);
  --field-border: var(--md-sys-color-outline);
  --field-border-focus: var(--md-sys-color-primary);
  --field-helper: var(--md-sys-color-on-surface-variant);
  --field-error: var(--md-sys-color-error);

  /* Badge (verified / abstained / failed / active) */
  --badge-verified-bg: var(--md-sys-color-success-container);
  --badge-verified-fg: var(--md-sys-color-on-success-container);
  --badge-failed-bg: var(--md-sys-color-error-container);
  --badge-failed-fg: var(--md-sys-color-on-error-container);
  --badge-active-bg: var(--md-sys-color-tertiary-container);
  --badge-active-fg: var(--md-sys-color-on-tertiary-container);
  --badge-neutral-bg: var(--md-sys-color-surface-container-highest);
  --badge-neutral-fg: var(--md-sys-color-on-surface-variant);

  /* Stat tile */
  --stat-bg: var(--md-sys-color-surface-container);
  --stat-bg-hover: var(--md-sys-color-surface-container-high);
  --stat-fg: var(--md-sys-color-on-surface);
  --stat-subtle: var(--md-sys-color-on-surface-variant);

  /* App bar / nav */
  --bar-bg: var(--glass-bg);
  --bar-fg: var(--md-sys-color-on-surface);
  --nav-active-bg: var(--md-sys-color-primary-container);
  --nav-active-fg: var(--md-sys-color-on-primary-container);
  --nav-fg: var(--md-sys-color-on-surface-variant);

  /* Page surface */
  --page-bg: var(--md-sys-color-surface-container-low);
  --page-fg: var(--md-sys-color-on-surface);
  --page-subtle: var(--md-sys-color-on-surface-variant);
  --divider: var(--md-sys-color-outline-variant);

  /* Dialog / scrim */
  --dialog-bg: var(--md-sys-color-surface-container-high);
  --dialog-fg: var(--md-sys-color-on-surface);
  --scrim: var(--md-sys-color-scrim);

  /* Snackbar */
  --snackbar-bg: var(--md-sys-color-surface-container-high);
  --snackbar-fg: var(--md-sys-color-on-surface);

  /* Table */
  --table-bg: var(--md-sys-color-surface-container);
  --table-head-fg: var(--md-sys-color-on-surface-variant);
  --table-row-hover: var(--md-sys-color-state-hover);
  --table-border: var(--md-sys-color-outline-variant);

  /* Code */
  --code-bg: var(--md-sys-color-surface-container-high);
  --code-fg: var(--md-sys-color-on-surface);
  --code-inline-bg: var(--md-sys-color-surface-container-highest);

  /* Sparkline / chart */
  --chart-stroke: var(--md-sys-color-primary);
  --chart-fill: var(--md-sys-color-primary-container);
  --chart-tertiary: var(--md-sys-color-tertiary);
  --chart-error: var(--md-sys-color-error);
  --chart-grid: var(--md-sys-color-outline-variant);

  /* Categorical chart series — cool chromatic order, blue first. */
  --chart-1:  var(--p-cat-blue);
  --chart-2:  var(--p-cat-teal);
  --chart-3:  var(--p-cat-indigo);
  --chart-4:  var(--p-cat-cyan);
  --chart-5:  var(--p-cat-green);
  --chart-6:  var(--p-cat-purple);
  --chart-7:  var(--p-cat-pink);
  --chart-8:  var(--p-cat-amber);
  --chart-growth: var(--p-cat-growth);
  --chart-growth-soft: var(--p-cat-growth-soft);
  /* Soft bar fill gradient stops (brand-blue fade) */
  --chart-bar-from: var(--p-cat-blue-soft);
  --chart-bar-to:   var(--p-brand);

  /* Soft pastel chips — blue family first, then cool pastels */
  --chip-role-1-bg: var(--p-cat-blue-soft);     --chip-role-1-fg: var(--p-cat-blue-on);
  --chip-role-2-bg: var(--p-cat-teal-soft);     --chip-role-2-fg: var(--p-cat-teal-on);
  --chip-role-3-bg: var(--p-cat-indigo-soft);   --chip-role-3-fg: var(--p-cat-indigo-on);
  --chip-role-4-bg: var(--p-cat-cyan-soft);     --chip-role-4-fg: var(--p-cat-cyan-on);
  --chip-role-5-bg: var(--p-cat-green-soft);    --chip-role-5-fg: var(--p-cat-green-on);
  --chip-role-6-bg: var(--p-cat-purple-soft);   --chip-role-6-fg: var(--p-cat-purple-on);
  --chip-cap-1-bg:  var(--p-brand-soft);        --chip-cap-1-fg:  var(--p-brand-soft-on);
  --chip-cap-2-bg:  var(--p-cat-teal-soft);     --chip-cap-2-fg:  var(--p-cat-teal-on);
  --chip-cap-3-bg:  var(--p-cat-green-soft);    --chip-cap-3-fg:  var(--p-cat-green-on);
  --chip-cap-4-bg:  var(--p-cat-indigo-soft);   --chip-cap-4-fg:  var(--p-cat-indigo-on);

  /* --- DEPTH LAYER (harness treatments) ---
     Cards float on a hairline ring + quiet drops (shadow-card); filled
     controls carry a soft bead; fields get a focus halo. */
  --card-shadow: 0 0 0 1px #f1f5f9, 0 2px 4px rgba(0, 0, 0, 0.05), 0 12px 24px rgba(0, 0, 0, 0.05);
  --card-shadow-hover: 0 0 0 1px #eef2f6, 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 32px rgba(0, 0, 0, 0.07);
  --btn-filled-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 2px rgba(0, 0, 0, 0.16),
    0 4px 14px rgba(0, 0, 0, 0.10);
  --btn-filled-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.14);
  --focus-glow: rgba(77, 107, 254, 0.16);
  --scrollbar: rgba(0, 0, 0, 0.15);        /* scrollbar light */
  --scrollbar-hover: rgba(0, 0, 0, 0.28);
  /* Grid-paper page texture (1px lines; applied with a fade mask in app.css) */
  --page-grid:
    linear-gradient(90deg, rgba(0, 0, 0, 0.016) 1px, transparent 0),
    linear-gradient(180deg, rgba(0, 0, 0, 0.016) 1px, transparent 0);
  /* Signature animated conic border sheen (mask-composited ring in app.css) */
  --sheen-conic:
    conic-gradient(from var(--border-angle),
      rgba(58, 101, 194, 0.28) 0%,
      rgba(120, 170, 255, 0.95) 12.5%,
      rgba(58, 101, 194, 0.28) 25%,
      rgba(120, 170, 255, 0.55) 50%,
      rgba(58, 101, 194, 0.28) 75%,
      rgba(120, 170, 255, 0.95) 87.5%,
      rgba(58, 101, 194, 0.28) 100%);
}

/* =========================================================================
   4. GLASS  (chrome surface treatment — the actual Harness recipe)
   Both themes: translucent white layers + backdrop blur (blur-glass is
   12px) + hairline borders. Light tints its hairlines blue-black
   (rgba(9,45,78,*), border-secondary); dark uses pure white alpha.
   The aurora is a fixed backdrop of soft radial blobs behind the glass —
   faint in light, a steel-blue atmosphere in dark.
   All rgba() values here are built from the primitives — NO new hex except
   the ring colors mirrored from shadow-card.
   ========================================================================= */
:root,
[data-theme="dark"] {
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-bg-strong: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-strong: rgba(255, 255, 255, 0.15);
  --glass-blur: 12px;
  --glass-saturate: 160%;
  /* Steel-blue aurora over #0a0a0a — pale sweep top-left, blue mass right */
  --glass-page-glow:
    radial-gradient(1200px 700px at 12% -8%,
      rgba(205, 216, 232, 0.10), transparent 55%),
    radial-gradient(1400px 800px at 88% 4%,
      rgba(118, 149, 214, 0.17), transparent 60%),
    radial-gradient(1000px 700px at 68% 42%,
      rgba(80, 110, 185, 0.11), transparent 62%),
    radial-gradient(900px 620px at 6% 82%,
      rgba(45, 70, 140, 0.13), transparent 60%);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --card-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 12px 32px rgba(0, 0, 0, 0.35);
  --btn-filled-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 4px 16px rgba(0, 0, 0, 0.40);
  --btn-filled-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.36),
    0 6px 22px rgba(0, 0, 0, 0.48);
  --focus-glow: rgba(103, 153, 254, 0.20);
  --scrollbar: rgba(255, 255, 255, 0.20);
  --scrollbar-hover: rgba(255, 255, 255, 0.30);
  --page-grid:
    linear-gradient(90deg, rgba(255, 255, 255, 0.020) 1px, transparent 0),
    linear-gradient(180deg, rgba(255, 255, 255, 0.020) 1px, transparent 0);
  /* Modal chrome: more opaque than cards or content bleeds through */
  --dialog-bg: rgba(30, 30, 30, 0.88);
  --snackbar-bg: rgba(38, 38, 38, 0.92);
  /* Fields: brighten the hairline on focus instead of coloring it (ds
     input-focus border) */
  --field-border-focus: rgba(255, 255, 255, 0.45);

  /* Filled controls follow the inverted CTA pair in dark */
  --btn-filled-bg: var(--p-d-ink);
  --btn-filled-fg: var(--p-d-ink-on);
  --btn-outline-border: rgba(255, 255, 255, 0.15);
  --btn-outline-border-hover: rgba(255, 255, 255, 0.60);

  /* Categorical chip / chart-bar / growth-soft MUST rebind AFTER the
     component :root block above. :root and [data-theme="dark"] share equal
     specificity (0,1,0); :root still matches <html>, so any rebind placed
     earlier is overridden by the later light [data-theme] block only when
     light is active. This placement wins the cascade for both defaults. */
  --chip-role-1-bg: var(--p-d-cat-blue-soft);   --chip-role-1-fg: var(--p-d-cat-blue-on);
  --chip-role-2-bg: var(--p-d-cat-teal-soft);   --chip-role-2-fg: var(--p-d-cat-teal-on);
  --chip-role-3-bg: var(--p-d-cat-green-soft);  --chip-role-3-fg: var(--p-d-cat-green-on);
  --chip-role-4-bg: var(--p-d-cat-cyan-soft);   --chip-role-4-fg: var(--p-d-cat-cyan-on);
  --chip-role-5-bg: var(--p-d-cat-purple-soft); --chip-role-5-fg: var(--p-d-cat-purple-on);
  --chip-role-6-bg: var(--p-d-cat-pink-soft);   --chip-role-6-fg: var(--p-d-cat-pink-on);
  --chip-cap-1-bg:  var(--p-d-brand-soft);      --chip-cap-1-fg:  var(--p-d-brand-soft-on);
  --chip-cap-2-bg:  var(--p-d-cat-teal-soft);   --chip-cap-2-fg:  var(--p-d-cat-teal-on);
  --chip-cap-3-bg:  var(--p-d-cat-green-soft);  --chip-cap-3-fg:  var(--p-d-cat-green-on);
  --chip-cap-4-bg:  var(--p-d-cat-cyan-soft);   --chip-cap-4-fg:  var(--p-d-cat-cyan-on);
  --chart-bar-from: var(--p-d-cat-blue-soft);
  --chart-bar-to:   var(--p-d-brand);
  --chart-growth-soft: var(--p-d-cat-growth-soft);
}

/* Light glass rebinds — same recipe, warm-white translucency, blue-tinted
   hairlines. Placed last so data-theme="light" wins over both :root blocks. */
[data-theme="light"] {
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.66);
  --glass-border: rgba(9, 45, 78, 0.10);
  --glass-border-strong: rgba(9, 45, 78, 0.18);
  --glass-blur: 12px;
  --glass-saturate: 160%;
  --glass-page-glow:
    radial-gradient(1100px 620px at 18% -14%,
      rgba(77, 107, 254, 0.05), transparent 60%),
    radial-gradient(900px 560px at 85% -10%,
      rgba(58, 101, 194, 0.04), transparent 62%);
  --card-shadow: 0 0 0 1px #f1f5f9, 0 2px 4px rgba(0, 0, 0, 0.05), 0 12px 24px rgba(0, 0, 0, 0.05);
  --card-shadow-hover: 0 0 0 1px #eef2f6, 0 4px 8px rgba(0, 0, 0, 0.06), 0 16px 32px rgba(0, 0, 0, 0.07);
  --btn-filled-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 2px rgba(0, 0, 0, 0.16),
    0 4px 14px rgba(0, 0, 0, 0.10);
  --btn-filled-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.14);
  --focus-glow: rgba(77, 107, 254, 0.16);
  --scrollbar: rgba(0, 0, 0, 0.15);
  --scrollbar-hover: rgba(0, 0, 0, 0.28);
  --page-grid:
    linear-gradient(90deg, rgba(0, 0, 0, 0.016) 1px, transparent 0),
    linear-gradient(180deg, rgba(0, 0, 0, 0.016) 1px, transparent 0);
  --dialog-bg: var(--p-surface);
  --snackbar-bg: var(--p-surface);
  --field-border-focus: var(--p-brand-soft-on);

  --btn-filled-bg: var(--p-ink);
  --btn-filled-fg: var(--p-ink-on);
  --btn-outline-border: rgba(9, 45, 78, 0.18);
  --btn-outline-border-hover: rgba(9, 45, 78, 0.36);

  /* Re-assert the light categorical chips/bars — the dark glass block above
     rebinds these on :root, which also matches <html> in light mode. */
  --chip-role-1-bg: var(--p-cat-blue-soft);     --chip-role-1-fg: var(--p-cat-blue-on);
  --chip-role-2-bg: var(--p-cat-teal-soft);     --chip-role-2-fg: var(--p-cat-teal-on);
  --chip-role-3-bg: var(--p-cat-indigo-soft);   --chip-role-3-fg: var(--p-cat-indigo-on);
  --chip-role-4-bg: var(--p-cat-cyan-soft);     --chip-role-4-fg: var(--p-cat-cyan-on);
  --chip-role-5-bg: var(--p-cat-green-soft);    --chip-role-5-fg: var(--p-cat-green-on);
  --chip-role-6-bg: var(--p-cat-purple-soft);   --chip-role-6-fg: var(--p-cat-purple-on);
  --chip-cap-1-bg:  var(--p-brand-soft);        --chip-cap-1-fg:  var(--p-brand-soft-on);
  --chip-cap-2-bg:  var(--p-cat-teal-soft);     --chip-cap-2-fg:  var(--p-cat-teal-on);
  --chip-cap-3-bg:  var(--p-cat-green-soft);    --chip-cap-3-fg:  var(--p-cat-green-on);
  --chip-cap-4-bg:  var(--p-cat-indigo-soft);   --chip-cap-4-fg:  var(--p-cat-indigo-on);
  --chart-bar-from: var(--p-cat-blue-soft);
  --chart-bar-to:   var(--p-brand);
  --chart-growth-soft: var(--p-cat-growth-soft);
}