/* Saturnity's Codebook themes Six palettes (saturn / lavender / forest / ocean / sunset / mono) each with a light and dark mode. Selected via data-theme + data-mode on . Light/dark and palette persist in localStorage. */ :root, html[data-theme="saturn"][data-mode="light"] { --color-bg: #fbf7ee; --color-bg-elev: #ffffff; --color-bg-soft: #f3ecdb; --color-border: #d9cdb0; --color-text: #2d2114; --color-text-muted:#6b5a40; --color-text-faint:#8c7e62; --color-accent: #c98b2d; --color-accent-hover:#a36a17; --color-accent-bg: rgba(201, 139, 45, 0.10); --color-link: #8c4a13; --color-link-hover:#a36a17; --color-success: #2e7d32; --color-warning: #b06b00; --color-danger: #b03030; --color-code-bg: #2a1f10; --color-code-fg: #f3ecdb; --color-tag-bg: rgba(201, 139, 45, 0.15); --color-tag-fg: #6b4810; --shadow-card: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -16px rgba(45, 33, 20, 0.30); } html[data-theme="saturn"][data-mode="dark"] { --color-bg: #14110a; --color-bg-elev: #1d1810; --color-bg-soft: #251f15; --color-border: #3c3322; --color-text: #f0e6d2; --color-text-muted:#bba879; --color-text-faint:#8a7a55; --color-accent: #f1ad5a; --color-accent-hover:#ffc880; --color-accent-bg: rgba(241, 173, 90, 0.12); --color-link: #f1ad5a; --color-link-hover:#ffd1a0; --color-success: #6dd07d; --color-warning: #ffb946; --color-danger: #ff6b6b; --color-code-bg: #f0e6d2; --color-code-fg: #14110a; --color-tag-bg: rgba(241, 173, 90, 0.16); --color-tag-fg: #ffd1a0; --shadow-card: 0 1px 0 rgba(0,0,0,0.3), 0 12px 32px -16px rgba(0,0,0,0.6); } html[data-theme="lavender"][data-mode="light"] { --color-bg: #f6f3fb; --color-bg-elev: #ffffff; --color-bg-soft: #ece4f6; --color-border: #d6cae6; --color-text: #261b3a; --color-text-muted:#5a4977; --color-text-faint:#7d6e98; --color-accent: #7a4ed9; --color-accent-hover:#5d34b8; --color-accent-bg: rgba(122, 78, 217, 0.10); --color-link: #5d34b8; --color-link-hover:#7a4ed9; --color-success: #2e7d32; --color-warning: #b06b00; --color-danger: #b03030; --color-code-bg: #261b3a; --color-code-fg: #ece4f6; --color-tag-bg: rgba(122, 78, 217, 0.15); --color-tag-fg: #4a2899; --shadow-card: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -16px rgba(38, 27, 58, 0.30); } html[data-theme="lavender"][data-mode="dark"] { --color-bg: #11091e; --color-bg-elev: #1a0f2c; --color-bg-soft: #221538; --color-border: #3b2a55; --color-text: #ece4f6; --color-text-muted:#bba5d7; --color-text-faint:#917db4; --color-accent: #b487ff; --color-accent-hover:#d3b5ff; --color-accent-bg: rgba(180, 135, 255, 0.15); --color-link: #b487ff; --color-link-hover:#d3b5ff; --color-success: #6dd07d; --color-warning: #ffb946; --color-danger: #ff6b6b; --color-code-bg: #ece4f6; --color-code-fg: #11091e; --color-tag-bg: rgba(180, 135, 255, 0.18); --color-tag-fg: #d3b5ff; --shadow-card: 0 1px 0 rgba(0,0,0,0.3), 0 12px 32px -16px rgba(0,0,0,0.6); } html[data-theme="forest"][data-mode="light"] { --color-bg: #f4f8f2; --color-bg-elev: #ffffff; --color-bg-soft: #e3eedc; --color-border: #cadcc0; --color-text: #15281a; --color-text-muted:#4a6650; --color-text-faint:#728e78; --color-accent: #3f7a3f; --color-accent-hover:#2c5d2c; --color-accent-bg: rgba(63, 122, 63, 0.10); --color-link: #2c5d2c; --color-link-hover:#3f7a3f; --color-success: #2e7d32; --color-warning: #b06b00; --color-danger: #b03030; --color-code-bg: #15281a; --color-code-fg: #e3eedc; --color-tag-bg: rgba(63, 122, 63, 0.15); --color-tag-fg: #1e441e; --shadow-card: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -16px rgba(21, 40, 26, 0.30); } html[data-theme="forest"][data-mode="dark"] { --color-bg: #0c150e; --color-bg-elev: #131e15; --color-bg-soft: #1a2a1d; --color-border: #2a432f; --color-text: #e3eedc; --color-text-muted:#a4c0a8; --color-text-faint:#7d9682; --color-accent: #7fc587; --color-accent-hover:#a5e0ac; --color-accent-bg: rgba(127, 197, 135, 0.13); --color-link: #7fc587; --color-link-hover:#a5e0ac; --color-success: #6dd07d; --color-warning: #ffb946; --color-danger: #ff6b6b; --color-code-bg: #e3eedc; --color-code-fg: #0c150e; --color-tag-bg: rgba(127, 197, 135, 0.16); --color-tag-fg: #a5e0ac; --shadow-card: 0 1px 0 rgba(0,0,0,0.3), 0 12px 32px -16px rgba(0,0,0,0.6); } html[data-theme="ocean"][data-mode="light"] { --color-bg: #f0f6fb; --color-bg-elev: #ffffff; --color-bg-soft: #dceaf5; --color-border: #bdd2e3; --color-text: #0c1f33; --color-text-muted:#3d5a78; --color-text-faint:#6b88a4; --color-accent: #2570c4; --color-accent-hover:#1655a0; --color-accent-bg: rgba(37, 112, 196, 0.10); --color-link: #1655a0; --color-link-hover:#2570c4; --color-success: #2e7d32; --color-warning: #b06b00; --color-danger: #b03030; --color-code-bg: #0c1f33; --color-code-fg: #dceaf5; --color-tag-bg: rgba(37, 112, 196, 0.13); --color-tag-fg: #103e76; --shadow-card: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -16px rgba(12, 31, 51, 0.30); } html[data-theme="ocean"][data-mode="dark"] { --color-bg: #07101b; --color-bg-elev: #0e1c2c; --color-bg-soft: #142a40; --color-border: #25405d; --color-text: #dceaf5; --color-text-muted:#9bbad7; --color-text-faint:#6b88a4; --color-accent: #5fa9ff; --color-accent-hover:#92c6ff; --color-accent-bg: rgba(95, 169, 255, 0.13); --color-link: #5fa9ff; --color-link-hover:#92c6ff; --color-success: #6dd07d; --color-warning: #ffb946; --color-danger: #ff6b6b; --color-code-bg: #dceaf5; --color-code-fg: #07101b; --color-tag-bg: rgba(95, 169, 255, 0.18); --color-tag-fg: #92c6ff; --shadow-card: 0 1px 0 rgba(0,0,0,0.3), 0 12px 32px -16px rgba(0,0,0,0.6); } html[data-theme="sunset"][data-mode="light"] { --color-bg: #fef4ee; --color-bg-elev: #ffffff; --color-bg-soft: #fce0cc; --color-border: #f0c4a4; --color-text: #3a1808; --color-text-muted:#7a4225; --color-text-faint:#a8704c; --color-accent: #d65c2e; --color-accent-hover:#b04318; --color-accent-bg: rgba(214, 92, 46, 0.10); --color-link: #b04318; --color-link-hover:#d65c2e; --color-success: #2e7d32; --color-warning: #b06b00; --color-danger: #b03030; --color-code-bg: #3a1808; --color-code-fg: #fce0cc; --color-tag-bg: rgba(214, 92, 46, 0.15); --color-tag-fg: #8a3008; --shadow-card: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -16px rgba(58, 24, 8, 0.30); } html[data-theme="sunset"][data-mode="dark"] { --color-bg: #1a0a04; --color-bg-elev: #261109; --color-bg-soft: #361810; --color-border: #56291a; --color-text: #fce0cc; --color-text-muted:#d6a486; --color-text-faint:#a8765c; --color-accent: #ff8a5a; --color-accent-hover:#ffac88; --color-accent-bg: rgba(255, 138, 90, 0.13); --color-link: #ff8a5a; --color-link-hover:#ffac88; --color-success: #6dd07d; --color-warning: #ffb946; --color-danger: #ff6b6b; --color-code-bg: #fce0cc; --color-code-fg: #1a0a04; --color-tag-bg: rgba(255, 138, 90, 0.18); --color-tag-fg: #ffac88; --shadow-card: 0 1px 0 rgba(0,0,0,0.3), 0 12px 32px -16px rgba(0,0,0,0.6); } html[data-theme="mono"][data-mode="light"] { --color-bg: #f7f7f7; --color-bg-elev: #ffffff; --color-bg-soft: #ebebeb; --color-border: #d0d0d0; --color-text: #161616; --color-text-muted:#555; --color-text-faint:#808080; --color-accent: #161616; --color-accent-hover:#444; --color-accent-bg: rgba(0, 0, 0, 0.06); --color-link: #161616; --color-link-hover:#444; --color-success: #2e7d32; --color-warning: #b06b00; --color-danger: #b03030; --color-code-bg: #161616; --color-code-fg: #f7f7f7; --color-tag-bg: rgba(0, 0, 0, 0.08); --color-tag-fg: #161616; --shadow-card: 0 1px 0 rgba(0,0,0,0.04), 0 8px 24px -16px rgba(0,0,0,0.30); } html[data-theme="mono"][data-mode="dark"] { --color-bg: #0d0d0d; --color-bg-elev: #161616; --color-bg-soft: #1f1f1f; --color-border: #353535; --color-text: #f5f5f5; --color-text-muted:#b0b0b0; --color-text-faint:#7c7c7c; --color-accent: #f5f5f5; --color-accent-hover:#ffffff; --color-accent-bg: rgba(255, 255, 255, 0.08); --color-link: #f5f5f5; --color-link-hover:#ffffff; --color-success: #6dd07d; --color-warning: #ffb946; --color-danger: #ff6b6b; --color-code-bg: #f5f5f5; --color-code-fg: #0d0d0d; --color-tag-bg: rgba(255, 255, 255, 0.10); --color-tag-fg: #ffffff; --shadow-card: 0 1px 0 rgba(0,0,0,0.3), 0 12px 32px -16px rgba(0,0,0,0.6); }