/* Nocturne Ritual — design tokens + the shared class vocabulary. Why: design/PHILOSOPHY.md. How: design/WEB-UX.md (the operational guide — read it before adding a rule here or a hex anywhere). One source of truth for every page + nav. Tokens live on so a page can re-bind one locally (mind.html's glass) without forking the palette. EVERY page follows the system theme; body[data-nav="dark"] remains as an escape hatch but nothing uses it — a page pinned to night while its siblings went light was exactly the drift #65 set out to remove. Contrast notes are measured against --card unless stated. Anything that carries text is held to 4.5:1; a token that would fail on a white card gets a light-mode value that flips direction rather than a second token. */ body { /* night (default) */ --bg: #0b0d14; --bg2: #090b10; --card: #121521; --card2: #171b2a; --line: #232838; --fg: #eceef2; --ink2: #b9c0cc; --muted: #8f97a6; --accent: #7fa9ff; /* links & focus */ --violet: #8b5cf6; /* reserved: the coach speaking — FILLS ONLY (4.3:1) */ --violet-deep: #5b21b6; --violet-ink: #a78bfa; /* the coach speaking, as TEXT — 6.68:1 vs --card */ --on-violet: #ffffff; /* the only ink allowed on --grad-coach */ --amber: #f59e0b; /* the coach LOUDER: nudge + hardware attention (hue 38) — 8.47:1 */ --series: #3987e5; /* data — validated vs --card (dark) */ --good: #37c978; /* state: yes, live, done — 8.48:1 */ --bad: #e05252; /* state: no, error, destructive — 4.76:1 */ /* composed values — a recipe repeated more than once becomes a token */ --grad-coach: linear-gradient(135deg, var(--violet), var(--violet-deep)); --chrome: rgba(11,13,20,.72); /* sticky bar under backdrop-filter: blur(12px) */ --shadow-pop: 0 6px 18px rgba(0,0,0,.45); /* the ONE elevation step (tooltips, popovers) */ --r-lg: 16px; /* niches: cards, tiles, panels */ --r-md: 10px; /* controls: buttons, nav links */ --r-sm: 8px; /* chips, badges, inputs, code pills */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 var(--font); } @media (prefers-color-scheme: light) { body:not([data-nav="dark"]) { --bg: #f4f5f8; --bg2: #eceef3; --card: #ffffff; --card2: #f7f8fb; --line: #e3e6ec; --fg: #191c22; --ink2: #3c4250; --muted: #6a7280; --accent: #2563eb; --series: #2a78d6; /* data — validated vs --card (light) */ --violet-ink: #6d28d9; /* inverts: the night value is 2.7:1 on white; this is 7.10:1 */ --amber: #b45309; /* inverts: #f59e0b is 2.2:1 on white; this is 5.02:1 */ --good: #0f7a46; /* darkened from #159a5a (3.6:1) — it carries 12px text */ --bad: #b91c1c; /* was never overridden; #e05252 is 3.8:1 on white, this is 6.5:1 */ --chrome: rgba(244,245,248,.82); --shadow-pop: 0 6px 18px rgba(16,20,32,.14); } } /* ---- shared vocabulary ---------------------------------------------- Everything below is additive and low-specificity on purpose: a page's own