/* Nocturne theme layer — the accent + surface token system the Workspace apps share. Transcribed from the design project's app documents (Trail/Ferry/Ledger/... all carry the identical block). Margin.dc.html pins night + sea; that is the default here. Two axes: data-theme = night | paper data-accent = rust | sea | ice | slate | blurple | plum | rose | ember | ochre | citron | moss | bone Every accent is one (hue, chroma) pair; the ramps are derived in OKLCH from it, so a theme swap never touches a component. */ /* Fallback only — every app sets data-accent on . */ body { --accent-h: 196; --accent-c: 0.082; } body[data-accent="sea"] { --accent-h: 196; --accent-c: 0.082; } body[data-accent="moss"] { --accent-h: 152; --accent-c: 0.078; } body[data-accent="ochre"] { --accent-h: 74; --accent-c: 0.098; } body[data-accent="rose"] { --accent-h: 18; --accent-c: 0.095; } body[data-accent="blurple"] { --accent-h: 289; --accent-c: 0.125; } body[data-accent="ember"] { --accent-h: 42; --accent-c: 0.105; } body[data-accent="plum"] { --accent-h: 336; --accent-c: 0.098; } body[data-accent="slate"] { --accent-h: 252; --accent-c: 0.052; } body[data-accent="citron"] { --accent-h: 118; --accent-c: 0.092; } body[data-accent="rust"] { --accent-h: 28; --accent-c: 0.115; } body[data-accent="ice"] { --accent-h: 224; --accent-c: 0.072; } body[data-accent="bone"] { --accent-h: 88; --accent-c: 0.028; } body[data-theme="night"] { --color-bg: #0b0d14; --color-surface: #14161f; --color-divider: color-mix(in srgb, #e9e9ed 11%, transparent); --color-accent: oklch(0.70 var(--accent-c) var(--accent-h)); --color-accent-200: oklch(0.93 calc(var(--accent-c) * 0.34) var(--accent-h)); --color-accent-300: oklch(0.87 calc(var(--accent-c) * 0.58) var(--accent-h)); --color-accent-400: oklch(0.79 calc(var(--accent-c) * 0.82) var(--accent-h)); --color-accent-500: oklch(0.70 var(--accent-c) var(--accent-h)); --color-accent-600: oklch(0.59 var(--accent-c) var(--accent-h)); --color-accent-700: oklch(0.47 calc(var(--accent-c) * 0.95) var(--accent-h)); --color-accent-800: oklch(0.37 calc(var(--accent-c) * 0.85) var(--accent-h)); } body[data-theme="paper"] { --color-bg: #e9ebf6; --color-surface: #f8f9fd; --color-text: #24262e; --color-divider: color-mix(in srgb, #24262e 15%, transparent); --color-neutral-100: #292b31; --color-neutral-200: #3f424d; --color-neutral-300: #595d6c; --color-neutral-400: #75798c; --color-neutral-500: #8b8fa3; --color-neutral-600: #a0a4b8; --color-neutral-700: #c2c6da; --color-neutral-800: #d9dcec; --color-neutral-900: #eceef8; --color-accent: oklch(0.52 var(--accent-c) var(--accent-h)); --color-accent-200: oklch(0.37 calc(var(--accent-c) * 0.85) var(--accent-h)); --color-accent-300: oklch(0.46 calc(var(--accent-c) * 0.95) var(--accent-h)); --color-accent-400: oklch(0.52 var(--accent-c) var(--accent-h)); --color-accent-500: oklch(0.62 var(--accent-c) var(--accent-h)); --color-accent-600: oklch(0.72 calc(var(--accent-c) * 0.9) var(--accent-h)); --color-accent-700: oklch(0.85 calc(var(--accent-c) * 0.6) var(--accent-h)); --color-accent-800: oklch(0.93 calc(var(--accent-c) * 0.35) var(--accent-h)); } a { color: var(--color-accent); } a:hover { color: var(--color-accent-400); }