/* * Juno — Color Tokens * Seven named themes; Manuscript is the canonical default (:root). * All other themes override the same property names. * * Semantic layers: * --bg / --bg-2 / --bg-3 surface hierarchy (lightest → darkest) * --rail / --r-bg sidebar surfaces * --border / --border-s rule + soft rule * --ink / --ink-2 / --ink-m / --ink-f text hierarchy (strongest → faintest) * --accent / --accent-s / --accent-l primary action color + tints * --st-i-bg/fg IDEATION status badge * --st-d-bg/fg DRAFTING status badge */ /* ─── Default: Manuscript ──────────────────────────────────── */ :root { --bg: oklch(97.5% 0.01 75); --bg-2: oklch(95.5% 0.013 75); --bg-3: oklch(93% 0.015 76); --rail: oklch(95.2% 0.013 76); --r-bg: oklch(94.5% 0.013 75); --border: oklch(85% 0.016 76); --border-s: oklch(91.5% 0.011 75); --ink: oklch(16% 0.016 55); --ink-2: oklch(29% 0.013 58); --ink-m: oklch(48% 0.012 63); --ink-f: oklch(67% 0.01 68); --accent: oklch(53% 0.18 50); --accent-s: oklch(96% 0.038 62); --accent-l: oklch(79% 0.1 55); --st-i-bg: oklch(93.5% 0.045 60); --st-i-fg: oklch(46% 0.19 50); --st-d-bg: oklch(92% 0.02 150); --st-d-fg: oklch(40% 0.1 152); } /* ─── Manuscript ───────────────────────────────────────────── */ [data-theme="manuscript"] { --bg: oklch(97.5% 0.01 75); --bg-2: oklch(95.5% 0.013 75); --bg-3: oklch(93% 0.015 76); --rail: oklch(95.2% 0.013 76); --r-bg: oklch(94.5% 0.013 75); --border: oklch(85% 0.016 76); --border-s: oklch(91.5% 0.011 75); --ink: oklch(16% 0.016 55); --ink-2: oklch(29% 0.013 58); --ink-m: oklch(48% 0.012 63); --ink-f: oklch(67% 0.01 68); --accent: oklch(53% 0.18 50); --accent-s: oklch(96% 0.038 62); --accent-l: oklch(79% 0.1 55); --st-i-bg: oklch(93.5% 0.045 60); --st-i-fg: oklch(46% 0.19 50); --st-d-bg: oklch(92% 0.02 150); --st-d-fg: oklch(40% 0.1 152); } /* ─── Birch ────────────────────────────────────────────────── */ [data-theme="birch"] { --bg: oklch(97.5% 0.006 140); --bg-2: oklch(95% 0.01 142); --bg-3: oklch(92.5% 0.014 144); --rail: oklch(92% 0.018 145); --r-bg: oklch(91% 0.016 143); --border: oklch(85% 0.015 145); --border-s: oklch(89% 0.012 144); --ink: oklch(22% 0.015 150); --ink-2: oklch(35% 0.012 148); --ink-m: oklch(52% 0.012 146); --ink-f: oklch(68% 0.01 144); --accent: oklch(46% 0.1 155); --accent-s: oklch(94% 0.025 150); --accent-l: oklch(78% 0.05 152); --st-i-bg: oklch(93% 0.03 155); --st-i-fg: oklch(44% 0.1 155); --st-d-bg: oklch(93% 0.025 90); --st-d-fg: oklch(48% 0.1 85); } /* ─── Slate ────────────────────────────────────────────────── */ [data-theme="slate"] { --bg: oklch(97.5% 0.005 245); --bg-2: oklch(95% 0.007 246); --bg-3: oklch(92.5% 0.01 248); --rail: oklch(93.5% 0.009 248); --r-bg: oklch(92.5% 0.009 246); --border: oklch(82% 0.013 248); --border-s: oklch(88.5% 0.008 247); --ink: oklch(16% 0.015 252); --ink-2: oklch(29% 0.013 250); --ink-m: oklch(48% 0.011 248); --ink-f: oklch(66% 0.008 246); --accent: oklch(44% 0.2 248); --accent-s: oklch(95% 0.032 248); --accent-l: oklch(72% 0.1 248); --st-i-bg: oklch(93.5% 0.038 248); --st-i-fg: oklch(42% 0.2 248); --st-d-bg: oklch(93% 0.025 200); --st-d-fg: oklch(42% 0.11 200); } /* ─── Dusk ─────────────────────────────────────────────────── */ [data-theme="dusk"] { --bg: oklch(96% 0.008 70); --bg-2: oklch(94% 0.01 68); --bg-3: oklch(91.5% 0.012 66); --rail: oklch(28% 0.02 55); --r-bg: oklch(26% 0.018 53); --border: oklch(84% 0.011 68); --border-s: oklch(89% 0.008 70); --ink: oklch(17% 0.013 57); --ink-2: oklch(31% 0.011 59); --ink-m: oklch(49% 0.01 62); --ink-f: oklch(65% 0.008 65); --accent: oklch(61% 0.22 44); --accent-s: oklch(96% 0.045 50); --accent-l: oklch(78% 0.1 47); --st-i-bg: oklch(94.5% 0.045 48); --st-i-fg: oklch(50% 0.22 44); --st-d-bg: oklch(93% 0.02 200); --st-d-fg: oklch(42% 0.11 200); } /* Dusk: dark rails need light ink */ [data-theme="dusk"] .rail--left, [data-theme="dusk"] .rail--right { --ink: oklch(93% 0.012 74); --ink-2: oklch(79% 0.011 71); --ink-m: oklch(61% 0.012 67); --ink-f: oklch(45% 0.01 63); --bg: oklch(28% 0.02 55); --bg-2: oklch(33% 0.018 55); --bg-3: oklch(38% 0.016 55); --border: oklch(40% 0.016 55); --border-s: oklch(34% 0.014 55); --accent-s: oklch(32% 0.1 46); --accent-l: oklch(46% 0.16 44); --st-i-bg: oklch(34% 0.1 46); --st-i-fg: oklch(74% 0.2 46); --st-d-bg: oklch(32% 0.06 200); --st-d-fg: oklch(70% 0.13 200); } /* ─── Obsidian ─────────────────────────────────────────────── */ [data-theme="obsidian"] { --bg: oklch(22% 0.022 258); --bg-2: oklch(26.5% 0.02 256); --bg-3: oklch(31% 0.018 254); --rail: oklch(15% 0.026 262); --r-bg: oklch(14% 0.024 260); --border: oklch(34% 0.022 256); --border-s: oklch(27% 0.02 258); --ink: oklch(91% 0.008 240); --ink-2: oklch(76% 0.01 244); --ink-m: oklch(55% 0.012 248); --ink-f: oklch(38% 0.014 252); --accent: oklch(66% 0.22 254); --accent-s: oklch(30% 0.13 256); --accent-l: oklch(45% 0.17 254); --st-i-bg: oklch(30% 0.12 85); --st-i-fg: oklch(74% 0.22 85); --st-d-bg: oklch(30% 0.12 254); --st-d-fg: oklch(70% 0.22 254); } /* ─── Embers ───────────────────────────────────────────────── */ [data-theme="embers"] { --bg: oklch(21% 0.024 48); --bg-2: oklch(25.5% 0.022 50); --bg-3: oklch(30% 0.02 52); --rail: oklch(14% 0.028 46); --r-bg: oklch(13% 0.026 44); --border: oklch(32% 0.022 50); --border-s: oklch(26% 0.02 48); --ink: oklch(89% 0.016 72); --ink-2: oklch(75% 0.016 70); --ink-m: oklch(57% 0.018 65); --ink-f: oklch(40% 0.016 62); --accent: oklch(70% 0.2 78); --accent-s: oklch(28% 0.1 70); --accent-l: oklch(46% 0.16 74); --st-i-bg: oklch(30% 0.1 74); --st-i-fg: oklch(74% 0.2 78); --st-d-bg: oklch(27% 0.1 155); --st-d-fg: oklch(66% 0.14 148); } /* ─── Pitch ────────────────────────────────────────────────── */ [data-theme="pitch"] { --bg: oklch(21% 0.005 60); --bg-2: oklch(25% 0.005 58); --bg-3: oklch(29% 0.004 56); --rail: oklch(13.5% 0.006 55); --r-bg: oklch(12% 0.005 53); --border: oklch(31% 0.005 57); --border-s: oklch(25% 0.004 58); --ink: oklch(89% 0.007 62); --ink-2: oklch(74% 0.007 61); --ink-m: oklch(54% 0.006 60); --ink-f: oklch(37% 0.005 58); --accent: oklch(80% 0.018 74); --accent-s: oklch(26% 0.014 66); --accent-l: oklch(50% 0.012 67); --st-i-bg: oklch(27% 0.05 72); --st-i-fg: oklch(78% 0.14 74); --st-d-bg: oklch(25% 0.03 240); --st-d-fg: oklch(68% 0.09 240); }