/* ========================================================= dumaguete.uk — theme.css Five themes. Every colour in the site resolves to a variable declared here. Nothing else in the codebase holds a raw hex. Switch by setting data-theme on . Default = stripe-light. ========================================================= */ :root, [data-theme="stripe-light"] { --bg: #F6F9FC; --surface: #FFFFFF; --surface-alt: #EEF3F8; --ink: #0A2540; --ink-soft: #425466; --ink-faint: #738190; --accent: #635BFF; --accent-ink: #FFFFFF; --accent-wash: #EEEDFE; --accent-2: #00A8CC; --line: #E3E8EE; --line-strong: #CFD8E3; --shadow-a: rgba(10, 37, 64, 0.06); --shadow-b: rgba(10, 37, 64, 0.10); color-scheme: light; } [data-theme="clear-blue"] { --bg: #F4F7FA; --surface: #FFFFFF; --surface-alt: #E8F2FD; --ink: #0B1B2B; --ink-soft: #4A5A6A; --ink-faint: #707E8B; --accent: #0066CC; --accent-ink: #FFFFFF; --accent-wash: #E8F2FD; --accent-2: #00897B; --line: #DBE3EA; --line-strong: #C3CFDA; --shadow-a: rgba(11, 27, 43, 0.06); --shadow-b: rgba(11, 27, 43, 0.10); color-scheme: light; } [data-theme="dumaguete-teal"] { --bg: #F1FAF7; --surface: #FFFFFF; --surface-alt: #E2F3EE; --ink: #06302B; --ink-soft: #3A6B62; --ink-faint: #63827B; --accent: #0D9087; --accent-ink: #FFFFFF; --accent-wash: #DDF3EF; --accent-2: #C98A00; --line: #CFE3DD; --line-strong: #B2D2C9; --shadow-a: rgba(6, 48, 43, 0.06); --shadow-b: rgba(6, 48, 43, 0.11); color-scheme: light; } [data-theme="night-slate"] { --bg: #0B1220; --surface: #151E30; --surface-alt: #1D283D; --ink: #E6EDF5; --ink-soft: #93A4BC; --ink-faint: #64748B; --accent: #7C8CFF; --accent-ink: #0B1220; --accent-wash: #1E2745; --accent-2: #39D6C0; --line: #2A3547; --line-strong: #3B4A63; --shadow-a: rgba(0, 0, 0, 0.30); --shadow-b: rgba(0, 0, 0, 0.45); color-scheme: dark; } [data-theme="warm-sand"] { --bg: #FDF8F1; --surface: #FFFDFA; --surface-alt: #F5EDE0; --ink: #2B2118; --ink-soft: #6B5943; --ink-faint: #857764; --accent: #C25A2B; --accent-ink: #FFFDFA; --accent-wash: #F8E9DF; --accent-2: #3F6B4F; --line: #E6DBCA; --line-strong: #D2C2AA; --shadow-a: rgba(43, 33, 24, 0.06); --shadow-b: rgba(43, 33, 24, 0.11); color-scheme: light; } /* ---- Reader text size (cycled from the left rail) ---- */ :root, [data-size="m"] { --scale: 1; } [data-size="l"] { --scale: 1.125; } [data-size="xl"] { --scale: 1.25; } /* ---- Shared, theme-independent tokens ---- */ :root { --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace; --content-max: 860px; --bar-h: 42px; --rail-size: 34px; --rail-gap: 6px; --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --shadow-soft: 0 1px 2px var(--shadow-a), 0 8px 24px var(--shadow-a); --shadow-lift: 0 1px 2px var(--shadow-a), 0 14px 34px var(--shadow-b); --ease: cubic-bezier(0.4, 0, 0.2, 1); }