/* ============================================================ theme.css — single source of truth for all design tokens. Layer order: 1. Canonical semantic tokens (OKLCH). ← mutated by theme engine 2. Derived semantic-overlay tier. ← driven by (1) 3. Legacy aliases (--bg, --or, --t1, --red…). ← consumed by 31 existing CSS files The theme engine (js/theme/engine.js) only writes to layer 1. Everything else is `color-mix` or `var()` so the cascade does the work. Load this BEFORE any other stylesheet. Pages also include js/theme/apply-saved.js in before stylesheets to avoid FOUC. ============================================================ */ :root { /* ─────────── 1. CANONICAL ─────────── 22 semantic colors + color-scheme. OKLCH values computed to match the current "apothecary" hex palette within OKLCH precision. The theme engine setProperty()s these. */ --color-base-100: oklch(96.960% 0.0124 75.368); /* #faf4ec */ --color-base-200: oklch(100.000% 0 0); /* #ffffff */ --color-base-300: oklch(96.282% 0.0119 79.784); /* #f7f2ea */ --color-base-content: oklch(16.842% 0 0); /* #0f0f0f */ --color-primary: oklch(59.700% 0.1562 44.885); /* #c85a1e */ --color-primary-content: oklch(98% 0.012 75); --color-secondary: oklch(46.384% 0.1235 44.626); /* #8f3d10 (or-deep) */ --color-secondary-content: oklch(96% 0.012 75); --color-accent: oklch(54.615% 0.2152 262.881); /* #2563eb */ --color-accent-content: oklch(98% 0 0); --color-neutral: oklch(21.612% 0.0061 56.043); /* #1c1917 warm-dark */ --color-neutral-content: oklch(92% 0.005 80); --color-info: oklch(54.615% 0.2152 262.881); /* #2563eb */ --color-info-content: oklch(98% 0 0); --color-success: oklch(51.807% 0.1076 154.090); /* #2a7a4b */ --color-success-content: oklch(98% 0 0); --color-warning: oklch(58.074% 0.1189 85.646); /* #9a7400 */ --color-warning-content: oklch(98% 0 0); --color-error: oklch(38.835% 0.1740 29.697); /* #850300 — darkened from #c0392b so success/error & warning/error stay distinct under red-green CVD (S4b); white error-content reads 9.8:1 */ --color-error-content: oklch(98% 0 0); color-scheme: light; /* Focus-ring color — a first-class, audited UI-indicator token (S3b). Defaults to the brand primary (which S3a keeps ≥3:1 on base-100/200); the randomizer generates it ≥3:1 vs the WORST base so keyboard focus stays visible on every surface, decoupled from the unconstrained brand. Legacy saved themes without this token inherit the default. */ --color-focus-ring: var(--color-primary); /* ─────────── 2. DERIVED SEMANTIC OVERLAYS ─────────── Drives the inline-rgba sweep. All `color-mix` so they track the canonical tokens automatically. */ /* Ink overlay scale — neutral darken (light theme) / lighten (dark theme). Replaces the rgba(15,15,15,.X) family. */ --ink-tint: color-mix(in oklch, var(--color-base-content) 3%, transparent); --ink-hover: color-mix(in oklch, var(--color-base-content) 4%, transparent); --ink-bd-soft: color-mix(in oklch, var(--color-base-content) 5%, transparent); --ink-shadow: color-mix(in oklch, var(--color-base-content) 6%, transparent); --ink-bd: color-mix(in oklch, var(--color-base-content) 8%, transparent); --ink-bd-strong: color-mix(in oklch, var(--color-base-content) 14%, transparent); /* Scrim scale — modal backdrops. Tracks --color-neutral. */ --scrim-soft: color-mix(in oklch, var(--color-neutral) 25%, transparent); --scrim: color-mix(in oklch, var(--color-neutral) 45%, transparent); --scrim-heavy: color-mix(in oklch, var(--color-neutral) 65%, transparent); /* Glass overlays — backdrop-filter surfaces. Tracks --color-base-200. */ --glass-light: color-mix(in oklch, var(--color-base-200) 70%, transparent); --glass: color-mix(in oklch, var(--color-base-200) 90%, transparent); --glass-strong: color-mix(in oklch, var(--color-base-200) 93%, transparent); /* Parchment separators — the rgba(228,222,214,.4-.5) hairlines. Tracks base-300 so dark themes get warm-dark separators, not invisible smudges. */ --separator: color-mix(in oklch, var(--color-base-300) 50%, transparent); --separator-strong: color-mix(in oklch, var(--color-base-300) 90%, transparent); /* Per-brand alpha tints — 4 levels each. */ --color-primary-soft: color-mix(in oklch, var(--color-primary) 10%, transparent); --color-primary-medium: color-mix(in oklch, var(--color-primary) 20%, transparent); --color-primary-strong: color-mix(in oklch, var(--color-primary) 35%, transparent); --color-primary-glow: color-mix(in oklch, var(--color-primary) 12%, transparent); --color-secondary-soft: color-mix(in oklch, var(--color-secondary) 10%, transparent); --color-secondary-medium: color-mix(in oklch, var(--color-secondary) 20%, transparent); --color-secondary-strong: color-mix(in oklch, var(--color-secondary) 35%, transparent); --color-accent-soft: color-mix(in oklch, var(--color-accent) 10%, transparent); --color-accent-medium: color-mix(in oklch, var(--color-accent) 20%, transparent); --color-accent-strong: color-mix(in oklch, var(--color-accent) 35%, transparent); --color-info-soft: color-mix(in oklch, var(--color-info) 8%, transparent); --color-info-medium: color-mix(in oklch, var(--color-info) 18%, transparent); --color-info-strong: color-mix(in oklch, var(--color-info) 35%, transparent); --color-success-soft: color-mix(in oklch, var(--color-success) 10%, transparent); --color-success-medium: color-mix(in oklch, var(--color-success) 20%, transparent); --color-success-strong: color-mix(in oklch, var(--color-success) 35%, transparent); --color-warning-soft: color-mix(in oklch, var(--color-warning) 10%, transparent); --color-warning-medium: color-mix(in oklch, var(--color-warning) 20%, transparent); --color-warning-strong: color-mix(in oklch, var(--color-warning) 35%, transparent); --color-error-soft: color-mix(in oklch, var(--color-error) 8%, transparent); --color-error-medium: color-mix(in oklch, var(--color-error) 20%, transparent); --color-error-strong: color-mix(in oklch, var(--color-error) 35%, transparent); /* Readable semantic-TEXT tokens (S3c). The headline semantics are tuned as FILLS (mid-lightness); used as TEXT on a base surface or on their own soft tint they can fall below 4.5:1. These derive a text-grade variant — same hue/chroma, lightness pinned to a contrast-safe band per mode via light-dark() — guaranteed ≥4.5:1 vs every base surface AND the own-soft tint (harness: worst ≥5.4:1). Pure CSS, tracks the semantic automatically. If light-dark()/ relative-color is unsupported, `color: var(--color-X-text)` is invalid and falls back to the inherited base-content, which is itself legible. */ --color-success-text: light-dark(oklch(from var(--color-success) 0.40 c h), oklch(from var(--color-success) 0.82 c h)); --color-warning-text: light-dark(oklch(from var(--color-warning) 0.40 c h), oklch(from var(--color-warning) 0.82 c h)); --color-error-text: light-dark(oklch(from var(--color-error) 0.40 c h), oklch(from var(--color-error) 0.82 c h)); --color-info-text: light-dark(oklch(from var(--color-info) 0.40 c h), oklch(from var(--color-info) 0.82 c h)); /* ─────────── 3. LEGACY ALIASES ─────────── 31 existing CSS files reference these names. Do not mutate; update the canonical tokens above and let cascade flow. */ /* Surfaces & ink — styles.css / bench.css / welcome.css legacy */ --bg: var(--color-base-100); --srf: var(--color-base-200); --srf2: var(--color-base-300); --hover: var(--ink-hover); /* Brand: orange family */ --or: var(--color-primary); --or-deep: var(--color-secondary); --or-soft: color-mix(in oklch, var(--color-primary) 25%, var(--color-base-100)); --or-softer: color-mix(in oklch, var(--color-primary) 12%, var(--color-base-100)); --or-l: var(--color-primary-soft); --or-m: var(--color-primary-medium); /* Semantic shorthand */ --red: var(--color-error); --red-l: var(--color-error-soft); --amb: var(--color-warning); --amb-l: var(--color-warning-soft); --grn: var(--color-success); --grn-l: var(--color-success-soft); --blu: var(--color-info); --blu-l: var(--color-info-soft); /* Text scale (was --t1..t5: literal greys) */ --t1: var(--color-base-content); --t2: color-mix(in oklch, var(--color-base-content) 80%, var(--color-base-100)); --t3: color-mix(in oklch, var(--color-base-content) 60%, var(--color-base-100)); --t4: color-mix(in oklch, var(--color-base-content) 40%, var(--color-base-100)); --t5: color-mix(in oklch, var(--color-base-content) 25%, var(--color-base-100)); /* Borders */ --bd: var(--ink-bd); --bd-soft: var(--ink-bd-soft); --bd-strong: var(--ink-bd-strong); /* Shadows — built on the ink scale so they adapt to mode. */ --shadow-xs: 0 1px 2px var(--ink-hover); --shadow-sm: 0 2px 6px var(--ink-bd-soft); --shadow: 0 1px 2px var(--ink-hover), 0 6px 20px var(--ink-hover); --shadow-lg: 0 8px 24px var(--ink-bd), 0 2px 4px var(--ink-hover); /* login.css alternate names */ --orange: var(--color-primary); --orange-dark: var(--color-secondary); --orange-glow: var(--color-primary-soft); --slate-900: var(--t1); --slate-800: var(--t2); --slate-700: var(--t3); --slate-600: var(--t3); --slate-500: var(--t4); --slate-400: var(--t4); --slate-300: var(--t5); --slate-200: var(--ink-bd); --slate-100: var(--ink-bd-soft); --slate-50: var(--color-base-300); --cream: var(--color-base-100); --white: var(--color-base-200); /* components/_tokens.css clinical aliases */ --rc-supportive: var(--color-success); --rc-supportive-soft: var(--color-success-soft); --rc-warning: var(--color-error); --rc-warning-soft: var(--color-error-soft); --rc-mixed: var(--color-warning); --rc-info: var(--color-info); --rc-rule-soft: var(--ink-bd-soft); --rc-emphasis: var(--t2); --rc-card-pad: 14px 16px; --rc-card-radius: 10px; /* Geometry — independent of color randomization for V1. The randomizer keeps these stable; only the generator UI exposes radius sliders. */ --r: 14px; --r-sm: 10px; --radius-box: var(--r); --radius-field: var(--r-sm); --radius-selector: 9999px; --border: 1px; }