/* ============================================================================
Montivory — DARK THEME (manual opt-in)
----------------------------------------------------------------------------
HOW IT WORKS
- Add data-theme="dark" to (or any subtree) — nothing else changes.
There is no prefers-color-scheme rule; dark is opt-in only.
- This file overrides SURFACE, TEXT, BORDER, OVERLAY, SHADOW and STATUS-FILL
tokens plus a brightened accent per brand. It touches no spacing, radius,
typography or motion token, and no component code.
- Must be @imported LAST (after brands.css): the dark scope and the brand
wiring have equal specificity, so source order decides.
- Combine freely:
Nesting works either way round (dark section inside a branded page, or a
branded card inside a dark page).
ELEVATION MODEL (Material-style — lighter = higher)
body #0a0a0b page
surface #141416 level 1 — panels, table rows, inputs
card #1a1a1d level 2 — cards, list items
popover #202024 level 3 — menus, dropdowns, dialogs, tooltips
raised #26262b level 4 — anything on top of a popover
Shadows still exist but are softer; the surface step is the primary cue.
============================================================================ */
[data-theme="dark"] {
/* --- Elevation ramp (raw values live here by design — Layer 1) --------
Cards are edgeless (no border, no shadow), so the ONLY thing separating a
card from the page is this ramp's step size. Card-to-body must therefore be
at least as legible as it is in light mode, where white on ivory measures
1.119:1 — the card step below is 1.264:1 against body. Keep the ramp strictly
increasing: body < surface < card < popover < raised. */
--dark-body: #0a0a0b;
--dark-surface: #16161a;
--dark-card: #232327;
--dark-popover: #2c2c31;
--dark-raised: #35353b;
/* --- Backgrounds ------------------------------------------------------ */
--brand-background-body: var(--dark-body);
--color-background-body: var(--dark-body);
--color-background-surface: var(--dark-surface);
--color-background-card: var(--dark-card);
--color-background-popover: var(--dark-popover);
--color-background-raised: var(--dark-raised);
/* One step above card, not equal to it: an interactive card hovers to muted,
and with the shadow gone that tint is the only hover feedback there is. */
--color-background-muted: var(--dark-popover);
--color-background-soft-blue: var(--dark-popover);
/* "Inverted" stays a dark panel in dark mode — flipping it to white would
make footers and inverted banners the brightest thing on the page. */
--color-background-inverted: var(--dark-raised);
/* --- Overlays --------------------------------------------------------- */
--color-overlay: rgba(0, 0, 0, 0.72);
--color-overlay-hover: rgba(255, 255, 255, 0.06);
--color-border-inverted: var(--color-border);
--color-overlay-pressed: rgba(255, 255, 255, 0.12);
--color-tint-hover: #ffffff;
/* --- Text ------------------------------------------------------------- */
--color-text-primary: #f4f4f6;
--color-text-secondary: #a6a6b0;
--color-text-disabled: #5b5b64;
--color-text-placeholder: #7c7c86;
--color-text-on-dark: #f4f4f6;
--color-text-inverted: #f4f4f6;
/* --- Icons ------------------------------------------------------------ */
--color-icon-primary: #f4f4f6;
--color-icon-secondary: #a6a6b0;
--color-icon-disabled: #5b5b64;
/* --- Borders ---------------------------------------------------------- */
--color-border: #2b2b32;
--color-card-border: #26262d;
--color-border-emphasized: #3b3b45;
--color-border-strong: #565661;
/* --- Effects ---------------------------------------------------------- */
--color-skeleton: #22222a;
--color-track: #2b2b32;
--color-shadow: rgba(0, 0, 0, 0.55);
/* --- Status ----------------------------------------------------------- */
/* Hues stay; the -text variants brighten (the light-mode ones are dark inks)
and the -muted fills become low-alpha tints of the hue on near-black. */
--color-success-text: #4fe3a4;
--color-success-muted: rgba(29, 218, 136, 0.16);
--color-warning-text: #f7c85a;
--color-warning-muted: rgba(249, 184, 0, 0.16);
--color-error-text: #ff8a75;
--color-error-muted: rgba(245, 80, 55, 0.18);
--color-info: #7ab4ff;
--color-info-muted: rgba(122, 180, 255, 0.14);
/* --- Categorical muted fills ----------------------------------------- */
--color-aqua-blue-muted: rgba(0, 200, 255, 0.16);
--color-yellow-sand-muted: rgba(240, 200, 0, 0.16);
--color-violet-sky-muted: rgba(98, 56, 245, 0.22);
--color-blossom-pink-muted: rgba(255, 110, 200, 0.16);
--color-slate-muted: #22222a;
/* --- Hero wash -------------------------------------------------------- */
--brand-gradient-hero: radial-gradient(120% 120% at 82% 0%, #1c1c22 0%, var(--dark-body) 60%); /* @kind other */
--on-gradient-hero: var(--color-text-primary);
/* ----------------------------------------------------------------------
ALIAS RE-DECLARATION
Aliases-of-aliases (button/input roles) are declared on :root, where they
resolve against LIGHT values and then inherit frozen. Re-declaring them
inside the dark scope forces them to recompute — this is what makes a
dark subtree inside a light page work.
---------------------------------------------------------------------- */
--color-button-primary-bg: var(--color-accent);
--color-button-primary-bg-hover: var(--color-accent-hover);
--color-button-primary-bg-press: var(--color-accent-active);
--color-button-primary-fg: var(--color-on-accent);
--color-button-outline-border: var(--color-border-emphasized);
--color-button-outline-border-hover: var(--color-accent-hover);
--color-button-outline-border-press: var(--color-accent-active);
--color-button-outline-fg: var(--color-text-primary);
--color-button-outline-fg-hover: var(--color-text-accent);
--color-button-text-fg: var(--color-text-primary);
--color-button-text-fg-hover: var(--color-text-accent);
--color-button-text-bg-hover: var(--color-overlay-hover);
--color-button-text-bg-press: var(--color-overlay-pressed);
--color-button-warning-fg: var(--color-on-error);
--color-segmented-active-fg: var(--color-on-accent);
--color-input-border: var(--color-border-emphasized);
--color-input-border-hover: var(--color-accent);
--color-input-border-focus: var(--color-accent);
--color-input-background-disabled: #1c1c22;
}
/* ============================================================================
PER-BRAND ACCENTS IN DARK
A CTA colour tuned for white surfaces is usually too dark on near-black.
Each brand gets a lifted accent (and a text-ink that clears 4.5:1 on
#0a0a0b). Brands whose accent is already light — Beacon's gold, Business
Score's green — keep the hue and only re-point the ink and muted fill.
Selectors cover: both attrs on one element, dark ancestor + brand
descendant, and brand ancestor + dark descendant.
============================================================================ */
/* Montivory (default) — Mont Blue #0064f0 is 2.6:1 on near-black; lift to 400. */
[data-theme="dark"] {
--brand-accent: #4d9bff;
--brand-accent-hover: #75b3ff;
--brand-accent-active: #2d84f5;
--brand-accent-muted: rgba(77, 155, 255, 0.18);
--brand-accent-ink: #8cbcff;
--brand-on-accent: #0a1524;
--brand-dark: var(--dark-raised);
--brand-gradient-a: #0a1524;
--brand-gradient-b: #0064f0;
}
/* Mind — purple #9236eb lifts to a 400-level violet. */
[data-brand="mind"][data-theme="dark"],
[data-theme="dark"] [data-brand="mind"],
[data-brand="mind"] [data-theme="dark"] {
--brand-accent: #b57bf5;
--brand-accent-hover: #c79bf8;
--brand-accent-active: #9d5ae9;
--brand-accent-muted: rgba(181, 123, 245, 0.18);
--brand-accent-ink: #c79bf8;
--brand-on-accent: #1b0733;
--brand-dark: var(--dark-raised);
--brand-gradient-a: #1b0733;
--brand-gradient-b: #9236eb;
}
/* Beacon — the gold already reads on black (9.2:1); ink is the gold itself. */
[data-brand="beacon"][data-theme="dark"],
[data-theme="dark"] [data-brand="beacon"],
[data-brand="beacon"] [data-theme="dark"] {
--brand-accent: #f5a623;
--brand-accent-hover: #f7bc4e;
--brand-accent-active: #d98e12;
--brand-accent-muted: rgba(245, 166, 35, 0.16);
--brand-accent-ink: #f7bc4e; /* light-mode ink #82540c is 2.1:1 here */
--brand-on-accent: #241a02;
--brand-dark: var(--dark-raised);
--brand-gradient-a: #14161f;
--brand-gradient-b: #0a0f1e;
}
/* Scorecard — the mint reads on black (8.55:1); ink is the mint itself,
since the anchor teal is far too dark against a dark card. */
[data-brand="scorecard"][data-theme="dark"],
[data-theme="dark"] [data-brand="scorecard"],
[data-brand="scorecard"] [data-theme="dark"] {
--brand-accent: #22d8a9;
--brand-accent-hover: #3fe0b7;
--brand-accent-active: #3bae91;
--brand-accent-muted: rgba(34, 216, 169, 0.16);
--brand-accent-ink: #22d8a9; /* light-mode ink #0c353b is 1.5:1 here; the mint is 8.55:1 */
--brand-on-accent: #0c353b; /* the brand's own anchor — 7.22:1 on the mint, same as light */
--brand-dark: var(--dark-raised);
--brand-gradient-a: #0c353b;
--brand-gradient-b: #072023;
--color-text-link: #22d8a9;
--color-segmented-active-fg: #0c353b;
--color-input-border-hover: #22d8a9;
--color-input-border-focus: #3fe0b7;
--color-focus-ring: #3fe0b7;
}
/* ============================================================================
RE-WIRE — same block as brands.css, re-run inside every dark scope so the
semantic aliases recompute against the dark brand knobs above.
============================================================================ */
[data-theme="dark"],
[data-brand="mind"][data-theme="dark"],
[data-theme="dark"] [data-brand="mind"],
[data-brand="mind"] [data-theme="dark"],
[data-brand="beacon"][data-theme="dark"],
[data-theme="dark"] [data-brand="beacon"],
[data-brand="beacon"] [data-theme="dark"],
[data-brand="scorecard"][data-theme="dark"],
[data-theme="dark"] [data-brand="scorecard"],
[data-brand="scorecard"] [data-theme="dark"] {
--color-accent: var(--brand-accent);
--color-accent-hover: var(--brand-accent-hover);
--color-accent-active: var(--brand-accent-active);
--color-accent-muted: var(--brand-accent-muted);
--color-on-accent: var(--brand-on-accent);
--color-text-accent: var(--brand-accent-ink, var(--brand-accent));
--color-text-link: var(--brand-accent-ink, var(--brand-accent));
--color-icon-accent: var(--brand-accent-ink, var(--brand-accent));
--color-focus-ring: var(--brand-accent-ink, var(--brand-accent));
--gradient-primary: var(--brand-gradient-dark-full, linear-gradient(135deg, var(--brand-gradient-a) 0%, var(--brand-gradient-b) 100%)); /* @kind other */
--gradient-hero: var(--brand-gradient-hero); /* @kind other */
/* The white→Mont Blue wash would glare in dark; drop to a surface-to-muted rise. */
--gradient-sidebar: linear-gradient(160deg, var(--color-background-surface) 0%, var(--color-background-surface) 50%, var(--color-background-muted) 100%); /* @kind other */
--gradient-nav-bar: linear-gradient(100deg, var(--color-background-surface) 0%, var(--color-background-surface) 50%, var(--color-background-muted) 100%); /* @kind other */
--on-gradient-wash-muted: var(--color-text-secondary); /* @kind color */
/* LOGO — white only in dark. Both the semantic aliases AND the brand-level
tokens are re-pointed at the white marks, so a component that reads
--brand-logo directly cannot render the colour version on a dark surface. */
--brand-logo: var(--brand-logo-on-dark); /* @kind other */
--brand-mark: var(--brand-mark-on-dark); /* @kind other */
--logo-full: var(--brand-logo-on-dark); /* @kind other */
--logo-mark: var(--brand-mark-on-dark); /* @kind other */
--logo-full-on-dark: var(--brand-logo-on-dark); /* @kind other */
--logo-mark-on-dark: var(--brand-mark-on-dark); /* @kind other */
}
/* Belt-and-braces: an /