/* Vyzora Design Tokens — Semantic Layer (ADR-008-A)
* ----------------------------------------------------------------------------
* Architectural Mid-Tone. Role tokens. Color encodes operational meaning.
* Adaptive split-mode: dark-internal / light-public-parchment.
* Mode set on per page. NOT prefers-color-scheme.
*
* Pages MUST also load primitives.css and fonts.css via BEFORE this file.
* Per ADR-008-A: explicit per-page ordering is the contract.
* ============================================================================
*/
/* ─── Dark mode (operational / Lens dashboard / platform governance) ─────── */
[data-theme="dark"] {
/* Surfaces — anti-near-black layered, visible tonal separation */
--bg-primary: var(--charcoal-800); /* #1F2128 — Lock 1A */
--surface-1: var(--charcoal-700); /* #262830 */
--surface-2: var(--charcoal-600); /* #2D2F38 */
--surface-3: var(--charcoal-500); /* #363842 */
--surface-rail: var(--charcoal-600);
--surface-gate: var(--charcoal-500);
--overlay: rgba(31, 33, 40, 0.84);
/* Borders / dividers (drawn-rule weight, not soft glow) */
--border-hairline: var(--charcoal-400); /* #3D3F49 */
--border-strong: var(--charcoal-300); /* #5A5C68 */
/* Text — warm cream off pure-white */
--text-primary: var(--charcoal-50); /* #F0E9D6 */
--text-secondary: var(--charcoal-100); /* #C9C0A8 */
--text-tertiary: var(--charcoal-200); /* #9C9582 */
--text-on-action: var(--charcoal-50);
/* Action — control-panel actuator (sienna fill, brass border) */
--action-primary: var(--sienna-600); /* #A34A33 */
--action-primary-hover: var(--sienna-500);
--action-primary-press: var(--sienna-700);
--action-primary-border: var(--brass-400);
/* Accent (traceability lines, oxidized brass plotter ink) */
--accent-trace: var(--brass-300); /* #D9B872 */
--accent-trace-soft: var(--brass-700);
/* State semantics — sienna/brass family ONLY (state-domain) */
--state-approved: var(--brass-400); /* plate-hardware patina, settled */
--state-approved-soft: var(--brass-700);
--state-pending: var(--sienna-400); /* warning paint */
--state-pending-soft: var(--sienna-700);
--state-blocked: var(--sienna-500); /* escalated paint + heavier border */
--state-blocked-soft: var(--sienna-700);
--state-in-progress: var(--brass-500); /* active hardware, pre-patina */
--state-in-progress-soft:var(--brass-700);
--state-locked: var(--charcoal-300);
--state-locked-soft: var(--charcoal-400);
/* Compound governance roles */
--evidence-attached: var(--brass-400);
--awaiting-approval: var(--sienna-400);
--needs-customer-input: var(--brass-500);
--risk-flagged: var(--sienna-400);
--synced: var(--brass-400);
--failed: var(--sienna-500);
--excluded: var(--charcoal-300);
/* Lens chart-domain — FIREWALLED from state-domain.
* Sienna/brass map to candle-up/candle-down ONLY (financial convention).
* Cool-blue-slate enters chart-domain only (heat-cold) — NOT a state token. */
--lens-candle-up: var(--brass-500); /* desat brass */
--lens-candle-down: var(--sienna-500); /* desat sienna */
--lens-candle-doji: var(--charcoal-300);
--lens-sparkline-stroke: var(--text-primary);
--lens-sparkline-fill: rgba(240, 233, 214, 0.06);
--lens-conviction-dot-active: var(--brass-400);
--lens-conviction-dot-inactive: var(--charcoal-400);
/* Heat ramp — LCH-interpolated; cool-slate cold to saturated sienna hot */
--lens-heat-cold: var(--slate-500); /* #5A7E97 cyanotype-faded */
--lens-heat-cool: var(--heat-cool-mid); /* #7E8D8C */
--lens-heat-neutral: var(--heat-neutral-mid);/* #8C8576 mid-chroma brass-grey */
--lens-heat-warm: var(--heat-warm-mid); /* #B57C5A */
--lens-heat-hot: var(--sienna-500); /* #C45D43 */
--lens-heat-nodata-base: var(--surface-3); /* #363842 + SVG hatch overlay (separate element) */
--lens-heat-delta-fg: var(--text-primary);
}
/* ─── Light mode (public / editorial / share / export — drafting linen) ── */
[data-theme="light"] {
--bg-primary: var(--linen-100); /* #F4F0E5 drafting linen */
--surface-1: var(--linen-50); /* #FFFFFF */
--surface-2: var(--linen-200); /* #EDE7D6 */
--surface-3: var(--linen-300);
--surface-rail: var(--linen-200);
--surface-gate: var(--linen-200);
--overlay: rgba(31, 29, 23, 0.62);
--border-hairline: var(--linen-300);
--border-strong: var(--linen-400);
--text-primary: var(--linen-700); /* #1F1D17 warm ink */
--text-secondary: var(--linen-600);
--text-tertiary: var(--linen-500);
--text-on-action: #FFFFFF;
--action-primary: var(--sienna-600);
--action-primary-hover: var(--sienna-500);
--action-primary-press: var(--sienna-700);
--action-primary-border: var(--brass-600);
--accent-trace: var(--brass-600);
--accent-trace-soft: var(--brass-300);
--state-approved: var(--brass-600);
--state-approved-soft: var(--brass-300);
--state-pending: var(--sienna-600);
--state-pending-soft: var(--sienna-300);
--state-blocked: var(--sienna-700);
--state-blocked-soft: var(--sienna-300);
--state-in-progress: var(--brass-500);
--state-in-progress-soft:var(--brass-300);
--state-locked: var(--linen-500);
--state-locked-soft: var(--linen-300);
--evidence-attached: var(--brass-600);
--awaiting-approval: var(--sienna-600);
--needs-customer-input: var(--brass-500);
--risk-flagged: var(--sienna-600);
--synced: var(--brass-600);
--failed: var(--sienna-700);
--excluded: var(--linen-500);
/* Chart tokens — light variants (financial convention preserved) */
--lens-candle-up: var(--brass-600);
--lens-candle-down: var(--sienna-700);
--lens-candle-doji: var(--linen-500);
--lens-sparkline-stroke: var(--text-primary);
--lens-sparkline-fill: rgba(31, 29, 23, 0.06);
--lens-conviction-dot-active: var(--brass-600);
--lens-conviction-dot-inactive: var(--linen-300);
--lens-heat-cold: var(--slate-600);
--lens-heat-cool: var(--heat-cool-mid);
--lens-heat-neutral: var(--heat-neutral-mid);
--lens-heat-warm: var(--heat-warm-mid);
--lens-heat-hot: var(--sienna-700);
--lens-heat-nodata-base: var(--linen-300);
--lens-heat-delta-fg: var(--text-primary);
}
/* ─── Default fallback (operational dark) ───────────────────────────────── */
html:not([data-theme]) {
--bg-primary: var(--charcoal-800);
--surface-1: var(--charcoal-700);
--surface-2: var(--charcoal-600);
--surface-3: var(--charcoal-500);
--text-primary: var(--charcoal-50);
--text-secondary:var(--charcoal-100);
--text-tertiary: var(--charcoal-200);
--border-hairline: var(--charcoal-400);
--border-strong: var(--charcoal-300);
--action-primary: var(--sienna-600);
--accent-trace: var(--brass-300);
}
/* ─── Reduced-motion default (Vyzora policy: stricter than standard)
* Pages have ZERO motion by default. Transitions only enable inside
* @media (prefers-reduced-motion: no-preference) {} per design-tokens.md. */
*, *::before, *::after {
transition: none;
animation: none;
}