/* * ═══════════════════════════════════════════════════════════════════════════ * Graybeard's Design System — theme.css * ═══════════════════════════════════════════════════════════════════════════ * Shared design tokens for the Graybeard's suite. * Copy or this file into any page in the suite — do not duplicate * these variables into page-specific CSS files. * * Themes: dark (default) | light | earthy * Switch: set data-theme="dark|light|earthy" on * ═══════════════════════════════════════════════════════════════════════════ */ /* ── Dark (default) ───────────────────────────────────────────────────── */ :root, [data-theme="dark"] { --bg: #000; --surface: #1c1c1e; --surface2: #2c2c2e; --surface3: #3a3a3c; --border: rgba(255,255,255,.10); --sep: rgba(255,255,255,.16); --t1: #fff; --t2: rgba(235,235,245,.60); --t3: rgba(235,235,245,.28); --hdr: #1c1c1e; --hdr-border: rgba(255,255,255,.08); --green: #30d158; --green-lo: rgba(48,209,88,.13); --green-text: #30d158; --accent: #5ac8fa; --accent-lo: rgba(90,200,250,.13); --warn: #ffd60a; --warn-lo: rgba(255,214,10,.13); --danger: #ff453a; --danger-lo: rgba(255,69,58,.13); --card-bg: #2c2c2e; --card-border: rgba(255,255,255,.07); --sel-ring: #fff; --nav-active: rgba(255,255,255,.08); --shadow: 0 1px 3px rgba(0,0,0,.40), 0 4px 20px rgba(0,0,0,.50); } /* ── Light ────────────────────────────────────────────────────────────── */ [data-theme="light"] { --bg: #e8e8ed; --surface: #fff; --surface2: #ebebf0; --surface3: #dcdce1; --border: rgba(60,60,67,.22); --sep: rgba(60,60,67,.35); --t1: #000; --t2: rgba(60,60,67,.80); --t3: rgba(60,60,67,.55); --hdr: #fff; --hdr-border: rgba(60,60,67,.18); --green: #34c759; --green-lo: rgba(52,199,89,.12); --green-text: #248a3d; --accent: #0a84ff; --accent-lo: rgba(10,132,255,.12); --warn: #ff9500; --warn-lo: rgba(255,149,0,.12); --danger: #ff3b30; --danger-lo: rgba(255,59,48,.12); --card-bg: #fff; --card-border: rgba(60,60,67,.09); --sel-ring: #007aff; --nav-active: rgba(0,0,0,.06); --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.07); } /* ── Reset & Base ─────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--t1); min-height: 100vh; transition: background .22s, color .22s; -webkit-font-smoothing: antialiased; } /* ── Shared utility classes (available to all pages) ──────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }