/*
* ZynoSuite v2 — Dark scheme (OPT-IN)
*
* The core token files are light-only on purpose: they are synced byte-for-byte
* from the SPA's foundation.css, and the product ships one scheme. This file is
* the dark ramp, kept OUT of `styles.css` so linking the core system never
* changes what the app renders.
*
* Light and dark are declared together with `light-dark()`, so a colour lives
* in exactly one place and the system default needs no JavaScript. The light
* values are the design system's own — a consumer that links this file renders
* light mode byte-identically to one that doesn't.
*
* Why restate the tokens at all: consumer markup is full of inline
* `var(--surface)` / `var(--ink)` / `var(--line)`. Re-pointing the token
* re-tones every one of them at once, rather than needing an edit per element.
*
* ── Use it ─────────────────────────────────────────────────────────
*
* ← after styles.css
*
* With no [data-theme] the page follows the OS, so the default is the system
* setting even with JavaScript off. A toggle pins a choice by setting
* [data-theme='light'|'dark'] on .
*
* ── Consumers with their own toggle ────────────────────────────────
* `light-dark()` resolves off `color-scheme`, not off a class. A consumer whose
* framework owns the toggle under a different hook maps that hook onto
* `color-scheme` in its own layer and everything below follows. VitePress, for
* example, toggles `html.dark`:
*
* html.dark { color-scheme: dark; }
* html:not(.dark) { color-scheme: light; }
*
* Don't add such hooks here — a `:not()` rule that always matches would pin one
* scheme for every other consumer and kill the system default.
*/
/* ═══════════════════════════════════════════════════════════════════
Theme resolution
`color-scheme: light dark` is what makes `light-dark()` work and what tells
the browser to darken its own furniture (scrollbars, form controls, the
canvas behind the page).
═══════════════════════════════════════════════════════════════════ */
:root {
color-scheme: light dark;
}
:root[data-theme='light'] {
color-scheme: light;
}
:root[data-theme='dark'] {
color-scheme: dark;
}
/* ═══════════════════════════════════════════════════════════════════
Core tokens, restated for both schemes
═══════════════════════════════════════════════════════════════════ */
:root {
/* Canvas / surfaces */
--bg: light-dark(#f7f6f3, #161e2f);
--bg-sunk: light-dark(#efeeea, #111827);
--surface: light-dark(#ffffff, #1b2438);
--surface-2: light-dark(#faf9f7, #1f2941);
--surface-3: light-dark(#f3f2ef, #24304c);
/* Chrome */
--chrome: light-dark(#1e293b, #0a1120);
--chrome-2: light-dark(#273449, #161f31);
--chrome-3: light-dark(#334155, #2d3a52);
/* Ink */
--ink: light-dark(#11110f, #e9eef7);
--ink-2: light-dark(#44423d, #b9c5d8);
--ink-3: light-dark(#76746e, #8d9bb2);
--ink-4: light-dark(#a8a59e, #67748c);
/* Lines */
--line: light-dark(#e8e6e0, #26314a);
--line-2: light-dark(#d9d6cf, #35425e);
--line-strong: light-dark(#d9d6cf, #35425e);
--line-on-chrome: light-dark(#334155, #2d3a52);
/* Accent — #2855d4 goes muddy on a dark ground, so dark lifts it to
#5c86f2. That clears 4.7:1 as text on the dark canvas; the trade is that
white on an accent FILL no longer passes, so filled surfaces must take
dark ink instead in dark mode. Consumers that paint accent fills are
responsible for that flip (lander.css does it for the websites). */
--accent: light-dark(#2855d4, #5c86f2);
--accent-hover: light-dark(#1f47b8, #7ba0f6);
--accent-soft: light-dark(#e8edfb, #1d2c50);
--accent-ink: light-dark(#1e3fa8, #adc4fb);
--accent-tint: light-dark(#d2dcf3, #2c4070);
/* The wash tracks the accent's dark lift and gains alpha with it — at
5.5% the dark cobalt disappears against a navy ground. */
--accent-wash: light-dark(rgba(40, 85, 212, 0.055), rgba(92, 134, 242, 0.09));
/* Semantic */
--ok: light-dark(#1f7a4d, #4ade80);
--ok-soft: light-dark(#e6f1ea, #12301f);
--warn: light-dark(#b66b00, #fbbf24);
--warn-soft: light-dark(#fbeed7, #33280d);
--err: light-dark(#b3321b, #f87171);
--err-soft: light-dark(#fbe5df, #3a1b19);
--info: light-dark(#3060c2, #7aa2f7);
--info-soft: light-dark(#e6edfa, #172440);
}
/*
* Elevation is deliberately NOT restated here. The `--el-*` scale in
* spacing.css is hairline-led and multi-layered; a tinted shadow is invisible
* on a dark ground, so dark needs its own near-black values at much higher
* alpha rather than a mechanical translation. Consumers that lean on shadow
* own that decision — see `--zl-el-*` in lander.css for the websites' take.
*/