/* ScaleMastery — Fuaran Music design tokens. * * Source of truth for colour, type, spacing. Mirrors the design hand-off in * `Brand Assets/Design Hand-off/scale-mastery/`. Light is the default on * `:root`; dark is an override applied when ``. * `--accent` is set independently (defaults to brass) so it can be themed * orthogonal to light/dark. * * Loaded BEFORE site.css so the CSS custom properties resolve when * other rules reference them. Pages opting into the design system use * the `.sm-page` body class to activate paper background + brand * typography baseline. */ :root { /* ── Foundation palette (light) ────────────────────────────────── */ --paper: #EFE9DC; --paper-bright: #FAFAF8; --paper-deep: #E4DCC9; --ink: #1A2026; --ink-body: rgba(26,32,38,0.78); --ink-mute: rgba(26,32,38,0.72); --loch: #357588; --mist: #62A5BE; --loch-deep: #1E4754; --rule: rgba(26,32,38,0.16); --rule-soft: rgba(26,32,38,0.09); /* Surface-specific UI chrome */ --rail-on: rgba(26,32,38,0.055); --header-bg: rgba(239,233,220,0.82); /* Logo mark base colour (loch-deep on light surfaces) */ --mark-base: #1E4754; /* Keyboard keybed (intentionally theme-independent fidelity in the * keyboard component; tokens here let dark mode flip them too) */ --white-key: #FAFAF8; --black-key: #20282E; --keybed: #DED6C4; /* ── Signature music accent ─────────────────────────────────────── */ --accent: #B07A2E; /* Brass — default. oklch(.60 .10 75) */ --accent-heather:#8A6E9E; /* oklch(.58 .09 310) */ --accent-rowan: #A65548; /* oklch(.55 .10 32) */ --accent-loch: #357588; /* The foundation blue used as accent */ /* ── Type stacks ────────────────────────────────────────────────── */ --sm-font-display: 'EB Garamond', Garamond, serif; /* italic 500 display */ --sm-font-mono: 'IBM Plex Mono', ui-monospace, monospace; --sm-font-music: 'Bravura', serif; /* SMuFL glyphs */ } /* ── Dark theme override ──────────────────────────────────────────── */ :root[data-theme="dark"] { --paper: #10171B; --paper-bright: #18222A; --paper-deep: #0C1216; --ink: #EFE9DC; --ink-body: rgba(239,233,220,0.80); --ink-mute: rgba(239,233,220,0.50); --loch: #62A5BE; --mist: #62A5BE; --rule: rgba(239,233,220,0.15); --rule-soft: rgba(239,233,220,0.08); --rail-on: rgba(239,233,220,0.07); --header-bg: rgba(16,23,27,0.82); --mark-base: #62A5BE; --white-key: #DCD6C7; --black-key: #0A0F12; --keybed: #0A1014; } /* ── Accent variants (set --accent on :root via JS) ───────────────── */ :root[data-accent="heather"] { --accent: var(--accent-heather); } :root[data-accent="rowan"] { --accent: var(--accent-rowan); } :root[data-accent="loch"] { --accent: var(--accent-loch); }