/** * Generated by scripts/site-theme.js — do not edit. * * Light is the default: no attribute on means daylight. assets/theme.js * sets data-theme="dark" before the first paint when a visitor has chosen it. * The dark values are the ones the design was drawn in, unchanged. */ :root { color-scheme: light; --bg: #f7f5ef; --bg-sunken: #efece2; --bg-footer: #eae7dc; --surface: #fffefa; --surface-2: #fbfaf4; --surface-note: #fdf7e8; --bg-header: rgba(247,245,239,0.9); --text-strong: #141c18; --text-heading: #18211c; --text: #212d27; --text-bright: #2c3a33; --text-muted: #4c5c54; --text-soft: #54645b; --text-dim: #5d6d64; --text-faint: #66766d; --text-note: #75643f; --accent: #2f6b5e; --accent-hover: #1e4c42; --select-bg: #bfdccd; --accent-ink: #f7f5ef; --accent-a45: rgba(47,107,94,0.45); --accent-a40: rgba(47,107,94,0.4); --accent-a35: rgba(47,107,94,0.35); --btn-top: #57a184; --btn-bottom: #2f6b5e; --btn-edge: #1c463a; --btn-ink: #f7f5ef; --amber: #8a6420; --amber-a35: rgba(138,100,32,0.35); --amber-a30: rgba(138,100,32,0.3); --amber-a22: rgba(138,100,32,0.22); --danger: #a3402a; --danger-a30: rgba(163,64,42,0.3); --line-22: rgba(20,28,24,0.24); --line-14: rgba(20,28,24,0.15); --line-12: rgba(20,28,24,0.13); --line-10: rgba(20,28,24,0.1); --line-09: rgba(20,28,24,0.09); --line-07: rgba(20,28,24,0.06); --shadow-95: rgba(20,28,24,0.12); --shadow-92: rgba(20,28,24,0.15); --shadow-90: rgba(20,28,24,0.13); --shadow-85: rgba(20,28,24,0.14); --shadow-80: rgba(20,28,24,0.13); --shadow-40: rgba(20,28,24,0.11); --shadow-35: rgba(20,28,24,0.1); --shadow-30: rgba(20,28,24,0.09); --stage-fog: #f7f5ef; --stage-floor: #e7e3d7; --stage-pew: #d5cfbe; --stage-bezel: #b7b1a2; --stage-ambient: #ffffff; } :root[data-theme='dark'] { color-scheme: dark; --bg: #0c1210; --bg-sunken: #0a0f0d; --bg-footer: #080c0b; --surface: #121a17; --surface-2: #0f1614; --surface-note: #141a12; --bg-header: rgba(12,18,16,0.88); --text-strong: #f4f2ea; --text-heading: #f1efe7; --text: #eceae1; --text-bright: #c8d2cb; --text-muted: #a9b5ad; --text-soft: #98a49c; --text-dim: #8b978f; --text-faint: #7f8b83; --text-note: #b6a98f; --accent: #74b096; --accent-hover: #9fcbb6; --select-bg: #2f6b5e; --accent-ink: #0b100e; --accent-a45: rgba(116,176,150,0.45); --accent-a40: rgba(116,176,150,0.4); --accent-a35: rgba(116,176,150,0.35); --btn-top: #93c8ae; --btn-bottom: #5f9c81; --btn-edge: #3d6a55; --btn-ink: #08110d; --amber: #c99a4e; --amber-a35: rgba(201,154,78,0.35); --amber-a30: rgba(201,154,78,0.3); --amber-a22: rgba(201,154,78,0.22); --danger: #cb5a45; --danger-a30: rgba(203,90,69,0.3); --line-22: rgba(236,234,225,0.22); --line-14: rgba(236,234,225,0.14); --line-12: rgba(236,234,225,0.12); --line-10: rgba(236,234,225,0.1); --line-09: rgba(236,234,225,0.09); --line-07: rgba(236,234,225,0.07); --shadow-95: rgba(0,0,0,0.95); --shadow-92: rgba(0,0,0,0.92); --shadow-90: rgba(0,0,0,0.9); --shadow-85: rgba(0,0,0,0.85); --shadow-80: rgba(0,0,0,0.8); --shadow-40: rgba(0,0,0,0.4); --shadow-35: rgba(0,0,0,0.35); --shadow-30: rgba(0,0,0,0.3); --stage-fog: #0a0f0d; --stage-floor: #0a100e; --stage-pew: #1c2723; --stage-bezel: #121b17; --stage-ambient: #5f7d72; } /* ── the toggle ─────────────────────────────────────────────────────────── * One button, two icons, and only ever one of them showing: the one for the * mode you would be switching to. */ [data-theme-toggle] { transition: border-color .15s ease, color .15s ease; } [data-theme-toggle]:hover { border-color: var(--accent); color: var(--accent); } [data-icon-sun] { display: none; } :root[data-theme='dark'] [data-icon-sun] { display: inline; } :root[data-theme='dark'] [data-icon-moon] { display: none; }