/* sabidurian.css — global design tokens */ /* * Theme strategy: dark is the default. The light theme is applied when: * 1. The user's OS prefers light AND no explicit theme has been set, OR * 2. A [data-theme="light"] attribute is set on (manual override). * * To wire up a toggle later, set/remove data-theme="light" on document.documentElement. */ :root { color-scheme: dark; /* ── Colors (dark theme — default) ───────────────── */ /* Backgrounds */ --color-bg: #40444B; --color-bg-card: #2C2E32; /* Text */ --color-text: #e0e0e0; --color-text-white: #ffffff; --color-text-muted: #888888; /* Borders & chrome */ --color-border: #2a2a2a; --color-border-hover: #444444; --color-chrome: #717171; /* rulers, branch SVGs */ /* ── Typography ───────────────────────────────────── */ --font-sans: 'Avenir Next', 'Avenir', 'Avenir Next LT Pro', 'Avenir LT Std', 'Segoe UI', 'Trebuchet MS', sans-serif; --font-serif: 'Crimson Text', serif; --font-mono: monospace; /* Sizes */ --text-xs: 0.75rem; /* h2 / label caps */ --text-sm: 0.85rem; /* card description */ --text-base: 1rem; --text-md: 1.1rem; /* card title */ --text-hero: 5.5rem; /* h1 */ /* ── Spacing ──────────────────────────────────────── */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; /* ── Layout ───────────────────────────────────────── */ --ruler-size: 24px; --radius-card: 12px; /* ── Motion ───────────────────────────────────────── */ --transition-fast: 0.2s ease; } /* ── Light theme ────────────────────────────────────── * * Palette intent: * bg warm parchment — feels like aged paper, not sterile white * bg-card slightly cooler cream — lifts off the page without heavy shadow * text deep warm charcoal — easier on the eyes than pure black * text-white darkest ink — replaces pure-white headings * text-muted warm mid-tone — keeps the same relative quietness as dark * border soft tan — visible but gentle * border-hover warm brown — subtle active feedback * chrome warm taupe — rulers/branches recede, don't shout * ─────────────────────────────────────────────────── */ /* Manual override: add data-theme="light" to */ :root[data-theme="light"] { color-scheme: light; --color-bg: #F2EDE3; --color-bg-card: #EAE4D8; --color-text: #55524e; --color-text-white: #55524e; --color-text-muted: #7A6E63; --color-border: #D4CBBC; --color-border-hover: #A89880; --color-chrome: #B0A494; } /* OS-level preference, unless a theme has been explicitly set */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --color-bg: #F2EDE3; --color-bg-card: #EAE4D8; --color-text: #55524e; --color-text-white: #55524e; --color-text-muted: #7A6E63; --color-border: #D4CBBC; --color-border-hover: #A89880; --color-chrome: #B0A494; } }