/* * vigil.directory theme system — ported from vigil.wiki so the public layer * matches the notebook. `:root` holds the non-color design tokens; each * `[data-theme][data-mode]` block defines the palette. The attributes live on * : set before paint by the bootstrap script /theme-boot.js (no flash) * and updated at runtime by ThemeSwitcher.svelte (persisted to localStorage). * * Served as a static asset (not bundled) because it is SHARED: linked by both * the SvelteKit shell (src/app.html) and the materialized pages emitted by * functions/src/render/ (issue #42) — one file, no duplicated theme blocks. */ :root { --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; --font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-mono: 'Geist Mono', 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace; --measure: 60ch; --step-1: 0.78125rem; --step-2: 0.875rem; --step-3: 1rem; --easing: cubic-bezier(0.4, 0, 0.2, 1); --t-fast: 140ms; } /* ---------- Theme: MONOCHROME (default) ---------- */ [data-theme='monochrome'][data-mode='light'] { --surface-0: #f7f7f5; --surface-1: #ffffff; --surface-2: #ffffff; --ink-0: #0d0d0c; --ink-1: #4a4a47; --ink-2: #8b8a85; --ink-3: #d8d6cf; --accent: #0d0d0c; --accent-soft: #ebeae5; --hairline: rgba(13, 13, 12, 0.18); --danger: #8a2a1f; --selection: rgba(13, 13, 12, 0.12); } [data-theme='monochrome'][data-mode='dark'] { --surface-0: #0f0f0e; --surface-1: #161614; --surface-2: #1c1c1a; --ink-0: #f3f1ea; --ink-1: #b9b6ac; --ink-2: #7c7972; --ink-3: #2f2e2a; --accent: #f3f1ea; --accent-soft: #232220; --hairline: rgba(243, 241, 234, 0.18); --danger: #d97757; --selection: rgba(243, 241, 234, 0.16); } /* ---------- Theme: INK (deep navy as accent) ---------- */ [data-theme='ink'][data-mode='light'] { --surface-0: #f7f7f5; --surface-1: #ffffff; --surface-2: #ffffff; --ink-0: #0a1a2e; --ink-1: #4b5868; --ink-2: #8b929b; --ink-3: #d4d7dc; --accent: #0a1a2e; --accent-soft: #e2e6ec; --hairline: rgba(10, 26, 46, 0.22); --danger: #8a2a1f; --selection: rgba(10, 26, 46, 0.14); } [data-theme='ink'][data-mode='dark'] { --surface-0: #0a1118; --surface-1: #11192a; --surface-2: #16213a; --ink-0: #e5ecf5; --ink-1: #a7b3c4; --ink-2: #6b7889; --ink-3: #233149; --accent: #8eb4e6; --accent-soft: #1a2540; --hairline: rgba(142, 180, 230, 0.22); --danger: #d97757; --selection: rgba(142, 180, 230, 0.18); } /* ---------- Theme: PENGUIN (editorial red) ---------- */ [data-theme='penguin'][data-mode='light'] { --surface-0: #f4ede0; --surface-1: #faf6ec; --surface-2: #ffffff; --ink-0: #1a1208; --ink-1: #564b39; --ink-2: #8a7e69; --ink-3: #d8cdb4; --accent: #b13a2a; --accent-soft: #efd9d3; --hairline: rgba(177, 58, 42, 0.28); --danger: #b13a2a; --selection: rgba(177, 58, 42, 0.18); } [data-theme='penguin'][data-mode='dark'] { --surface-0: #181210; --surface-1: #211a16; --surface-2: #29201b; --ink-0: #f4ede0; --ink-1: #b8ad96; --ink-2: #7c715e; --ink-3: #38302a; --accent: #e26954; --accent-soft: #2c1c18; --hairline: rgba(226, 105, 84, 0.28); --danger: #e26954; --selection: rgba(226, 105, 84, 0.22); } /* ---------- Theme: SULFUR (acid yellow) ---------- */ [data-theme='sulfur'][data-mode='light'] { --surface-0: #f9f7ef; --surface-1: #ffffff; --surface-2: #ffffff; --ink-0: #131210; --ink-1: #4d4a40; --ink-2: #8a8676; --ink-3: #d4cfbd; --accent: #b08800; --accent-soft: #efe7c4; --hairline: rgba(176, 136, 0, 0.32); --danger: #8a2a1f; --selection: rgba(176, 136, 0, 0.2); } [data-theme='sulfur'][data-mode='dark'] { --surface-0: #0e0d0a; --surface-1: #15140f; --surface-2: #1c1a13; --ink-0: #f4f1e3; --ink-1: #b8b29a; --ink-2: #7c7765; --ink-3: #2e2b22; --accent: #ffd60a; --accent-soft: #2a2510; --hairline: rgba(255, 214, 10, 0.3); --danger: #d97757; --selection: rgba(255, 214, 10, 0.24); } /* ---------- Theme: JADE (deep green-teal) ---------- */ [data-theme='jade'][data-mode='light'] { --surface-0: #eef2ee; --surface-1: #f7faf6; --surface-2: #ffffff; --ink-0: #0c1814; --ink-1: #455952; --ink-2: #7e8e89; --ink-3: #cad6d0; --accent: #1c4a40; --accent-soft: #d5e2dd; --hairline: rgba(28, 74, 64, 0.26); --danger: #8a2a1f; --selection: rgba(28, 74, 64, 0.16); } [data-theme='jade'][data-mode='dark'] { --surface-0: #0a1411; --surface-1: #0f1d18; --surface-2: #14271f; --ink-0: #e6efea; --ink-1: #9bb1a7; --ink-2: #647871; --ink-3: #1f342c; --accent: #7fcfb3; --accent-soft: #15291f; --hairline: rgba(127, 207, 179, 0.26); --danger: #d97757; --selection: rgba(127, 207, 179, 0.18); } /* ---------- Theme: IRIS (cobalt) ---------- */ [data-theme='iris'][data-mode='light'] { --surface-0: #f5f6fa; --surface-1: #ffffff; --surface-2: #ffffff; --ink-0: #0a0e1f; --ink-1: #4a4f63; --ink-2: #8a8fa1; --ink-3: #d4d6e0; --accent: #2541df; --accent-soft: #dbdfff; --hairline: rgba(37, 65, 223, 0.26); --danger: #8a2a1f; --selection: rgba(37, 65, 223, 0.16); } [data-theme='iris'][data-mode='dark'] { --surface-0: #0a0b14; --surface-1: #11131f; --surface-2: #161828; --ink-0: #e9eafc; --ink-1: #a3a6c1; --ink-2: #6b6e85; --ink-3: #232639; --accent: #98a5ff; --accent-soft: #1c2040; --hairline: rgba(152, 165, 255, 0.26); --danger: #d97757; --selection: rgba(152, 165, 255, 0.2); } ::selection { background: var(--selection); }