/* ────────────────────────────────────────────────────────────────────
theme-rateexceptions-v2 — sunstate@rates tenant theme
Parent: system-base-theme (declares canonical tokens + light defaults +
:root[data-theme="dark"] overrides + @font-face for Inter + JetBrains
Mono with metric-tuned Fallback families for CLS=0).
This file declares ONLY tenant brand overrides on TOP of canonical
tokens. Per .claude/rules/26b-site-authoring-with-blueprints.md §2:
- NEVER alias `--theme_*` tokens (parent doesn't define them; the
alias resolves to "" and every consumer paints unstyled)
- NEVER re-declare canonical greys/spacing/radius/shadows — they
cascade from system-base-theme
- DO override the brand-specific tokens (--accent, --accent-secondary)
and any tenant-specific surface tone
──────────────────────────────────────────────────────────────────── */
:root {
/* ─── Tenant brand ─────────────────────────────────────────────── */
--accent: #1b2a4a; /* Sunstate navy — chrome bar, submit buttons */
--accent-hover: #16223d;
--accent-active: #111a2e;
--accent-soft: #dbeafe;
--on-accent: #ffffff;
--accent-secondary: #e86a1a; /* warm orange — active state, focus rings */
--accent-secondary-hover: #c95a14;
--accent-secondary-soft: #fdebdc;
--on-accent-secondary: #ffffff;
/* ─── Tenant surface tone (slight cool tint) ───────────────────── */
--surface-base: #f5f6fa; /* canonical default is #FAFAFA — tenant prefers cool */
/* ─── Chart palette (light) ─────────────────────────────────────
Chart.js needs resolved hex; pages call
getComputedStyle(document.documentElement).getPropertyValue('--chart-N')
and pass into dataset.backgroundColor. See plan §7 + per-page
bootstrap pattern. */
--chart-1: #1b2a4a; /* navy — series 1 */
--chart-2: #e86a1a; /* orange — series 2 */
--chart-3: #15803d; /* green — series 3 */
--chart-4: #b45309; /* amber — series 4 */
--chart-5: #1d4ed8; /* blue — series 5 */
--chart-6: #7c3aed; /* violet — series 6 */
--chart-axis: var(--border-default);
--chart-grid: var(--border-subtle);
--chart-tooltip-bg: var(--surface-raised);
--chart-tooltip-fg: var(--text-primary);
/* ─── Brand navy as text-on-dark fallback ───────────────────────
Pages that paint `color: var(--accent)` on dark surfaces get
near-invisible navy. Use --accent-on-dark for that case. In
light mode it resolves to the same navy. */
--accent-on-dark: #1b2a4a;
/* ─── Tenant typography sizing ──────────────────────────────────
Parent system-base-theme already declares the font-families
(Inter / JetBrains Mono / Source Serif 4) with self-hosted
@font-face + metric fallbacks. We only adjust the base body
size to match the rates app's dense-data layout convention. */
/* ─── Page-local rate-matrix tints ───────────────────────────────
Used by rate-detail-rates-tab `.rxd-rates-table-region`. Declared
here (tenant theme — NOT page-scoped) so the [data-theme="dark"]
override below can match — page-CSS selectors get prefixed with
[data-cmp="UID"] by the template-CSS scoping processor, which
breaks [data-theme="dark"] rules that target . */
--rxd-active-tint: #fffbf6; /* ACTIVE RATES — orange tint */
--rxd-proposed-tint: #f6fff6; /* PROPOSED RATES — green tint */
/* Zebra-stripe + row-hover overlays (2026-06-01 per Victor). Applied as a
background-image gradient layered OVER the column tints, so striping/hover
stay consistent across tinted AND untinted columns. Light theme darkens;
the [data-theme="dark"] block below lightens. */
--rxd-row-stripe: rgba(15, 23, 42, 0.03); /* even-row darkening — kept very subtle per Victor */
--rxd-row-hover: rgba(15, 23, 42, 0.09); /* subtle gray hover */
--rxd-row-hover-bar: rgba(15, 23, 42, 0.22); /* thin left affordance */
/* ─── TEMPORARY: --theme_* forwarding aliases ────────────────────
13 pages still reference `var(--theme_X, #fallback)`. These
resolved to "" (empty) before, so pages painted the fallback
hex unconditionally — no theme adaptation. The forwarding
declarations below restore theme adaptation while pages migrate.
Plan §9 risk mitigation: keep aliases as forwarding for ONE
push, then rewrite pages in Wave B/D, then delete this block.
DO NOT add new --theme_* references — they are BANNED per
26b-site-authoring-with-blueprints.md §2.11. */
--theme_bg_card: var(--surface-card);
--theme_bg_subtle: var(--surface-subtle);
--theme_border: var(--border-default);
--theme_border_subtle: var(--border-subtle);
--theme_color_accent: var(--accent-secondary);
--theme_color_danger: var(--danger);
--theme_color_danger_hover: var(--danger-hover);
--theme_color_danger_subtle: var(--danger-soft);
--theme_color_primary: var(--accent);
--theme_color_primary_hover: var(--accent-hover);
--theme_color_primary_subtle: var(--accent-soft);
--theme_text: var(--text-primary);
--theme_text_muted: var(--text-muted);
}
/* ────────────────────────────────────────────────────────────────────
Dark-mode brand overrides
Canonical surface / text / border / semantic-soft / shadow tokens
cascade from system-base-theme's :root[data-theme="dark"] block
(lines 342–401). We re-tone ONLY the brand-specific tokens:
- --accent-soft: dark navy-tinted soft surface (canonical override
is #1f2937 — generic dark; the tenant prefers a navy hint)
- --accent-on-dark: sky-300 — replaces navy for text-on-dark use
cases. Pages using --accent as `color` should switch to this.
Pages using --accent as `background` keep navy (chrome stays
brand-consistent).
- --chart-*: re-bind to a chart-friendly dark palette. Series
must remain distinguishable + readable against #161b22 card bg.
──────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
/* Brand soft surfaces — tenant-tuned */
--accent-soft: #1e293b; /* slate-tinted dark */
--accent-secondary-soft: rgba(232, 106, 26, 0.18);
/* Text-on-dark accent — sky-300 ≥7:1 contrast on --surface-card */
--accent-on-dark: #93c5fd;
/* Chart palette — saturation bumped so dark cards don't swallow series */
--chart-1: #93c5fd; /* sky — was navy */
--chart-2: #fbbf24; /* amber — was orange */
--chart-3: #34d399; /* mint — was green */
--chart-4: #fb923c; /* peach — was amber */
--chart-5: #818cf8; /* indigo — was blue */
--chart-6: #c084fc; /* fuchsia — was violet */
/* Rate-matrix tints — warm/cool dark slates, ≥4.5:1 with --text-primary */
--rxd-active-tint: #33271a; /* ACTIVE RATES — warm orange-slate (dark) */
--rxd-proposed-tint: #1e2a1f; /* PROPOSED RATES — cool forest-slate (dark) */
/* Stripe/hover overlays LIGHTEN on dark theme (see light block above). */
--rxd-row-stripe: rgba(255, 255, 255, 0.035); /* very subtle on the dark base per Victor */
--rxd-row-hover: rgba(255, 255, 255, 0.10);
--rxd-row-hover-bar: rgba(255, 255, 255, 0.24);
/* TEMPORARY --theme_* dark overrides — same disclaimer as :root.
Re-tone --theme_color_primary so navy-as-text on dark surfaces
becomes readable. Pages using it as BACKGROUND now paint sky
instead of navy — acceptable trade-off; pages get rewritten in
Wave B/D to use --accent (background) vs --accent-on-dark (text)
explicitly, then this block disappears. */
--theme_color_primary: var(--accent-on-dark);
--theme_color_primary_hover: #60a5fa; /* sky-400 */
--theme_color_primary_subtle: var(--accent-soft);
}
/* ────────────────────────────────────────────────────────────────────
color-scheme — tells the browser to use its dark UA styles for native
controls when `data-theme="dark"`. Without this, native widgets like
's popup calendar,