/* * Meridian web — colour and theme tokens (WEB-001). * * Source: `tokens.json` in the 2026-09-23 web handoff. Every colour on the site * is one of these custom properties; `meridian.css` and `components.css` never * carry a literal colour of their own, so a theme is exactly one block here. * * Dark is the default. Light is a separate design on warm paper, not an * inversion. Which one renders: * 1. ``, set by `theme.js` from the viewer's * explicit choice (persisted in localStorage), wins; * 2. otherwise `prefers-color-scheme`. * The light block is written twice because CSS cannot share one declaration * list between a media query and an attribute selector. * * Accent discipline, the handoff's most important rule: `--accent` is used for * the focus ring, the dark primary CTA fill and dark price emphasis — nothing * else. Light keeps the brand teal for the focus ring only; its CTA is a * near-black fill and its price colour is `#00767c`, because brand teal fails * contrast on paper. Recommendation, ticks, badges, bars and links are ink. * * Values not in tokens.json are marked "derived" with the reason. */ :root { color-scheme: dark; --ground: #0d0c0b; --panel: #171614; --raised: #1f1d1a; --zebra: #131210; --skeleton: #242019; --border: #2a2622; --border-hover: #3a3530; --border-strong: #4a443c; --border-emphasis: #6f6a62; --text: #f2ede6; --text-2: #a7a196; /* Placeholders, disabled labels, struck-through expired codes, artwork captions. ~3.7:1 — never running copy. */ --text-3: #6f6a62; --accent: #00c3cb; --focus: #00c3cb; --price: #00c3cb; --primary-fill: #00c3cb; --primary-hover: #22d2d9; --primary-pressed: #00aab1; --on-primary: #05201f; --accent-ink: #05201f; --accent-tint: #0e3234; --accent-line: rgba(0, 195, 203, 0.45); --accent-text: #7fd8dc; --success-line: rgba(0, 195, 203, 0.5); --success-glow: 0 0 44px rgba(0, 195, 203, 0.18); --selection: rgba(0, 195, 203, 0.28); --danger: #e0654f; --danger-fill: #1c1513; --danger-border: #3a241e; --warning: #e8a13a; --warning-fill: #1f1a12; --warning-line: #4a3f2b; --badge-fill: #f2ede6; --badge-ink: #0d0c0b; --progress-track: #332f2a; --progress-fill: #f2ede6; --backdrop: rgba(6, 5, 5, 0.72); --shadow-recommended: 0 18px 44px rgba(0, 0, 0, 0.5); --shadow-panel: 0 24px 64px rgba(0, 0, 0, 0.5); /* Abstract illustration tones (landing artwork, keygrid). Derived: the companion handoff's literal values, lifted so light can restate them. */ --art-1: #2f2b26; --art-2: #242019; --art-3: #201d19; --art-tile-from: #242019; --art-tile-to: #1a1815; --glow: rgba(0, 195, 203, 0.1); --glow-none: rgba(0, 195, 203, 0); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --ground: #f6f2ea; --panel: #fffcf6; --raised: #efe9df; --zebra: #faf6ef; --skeleton: #ebe4d8; /* derived: between raised and border */ --border: #e0d8ca; --border-hover: #d5ccbc; --border-strong: #d5ccbc; --border-emphasis: #938b7e; --text: #1b1916; --text-2: #6b6459; --text-3: #938b7e; --accent: #00767c; --focus: #00c3cb; --price: #00767c; --primary-fill: #1b1916; --primary-hover: #34302a; /* derived: ~6% lift of the fill */ --primary-pressed: #000000; --on-primary: #f6f2ea; --accent-ink: #f6f2ea; --accent-tint: #e4f2f1; /* derived: loading/success fill on paper */ --accent-line: rgba(0, 118, 124, 0.4); --accent-text: #00767c; --success-line: rgba(0, 118, 124, 0.45); --success-glow: 0 0 40px rgba(0, 118, 124, 0.12); --selection: rgba(0, 118, 124, 0.18); --danger: #b23b23; --danger-fill: #fdf1ed; --danger-border: #e3c4ba; --warning: #9a5b00; /* derived: #e8a13a fails on paper */ --warning-fill: #fbf3e4; --warning-line: #e7d3ad; --badge-fill: #1b1916; --badge-ink: #f6f2ea; --progress-track: #ded5c6; --progress-fill: #1b1916; --backdrop: rgba(27, 25, 22, 0.42); --shadow-recommended: 0 16px 40px rgba(27, 25, 22, 0.13); --shadow-panel: 0 20px 56px rgba(27, 25, 22, 0.12); --art-1: #ddd4c5; --art-2: #e6dfd2; --art-3: #ece6db; --art-tile-from: #e9e2d5; --art-tile-to: #f1ebe1; --glow: rgba(0, 118, 124, 0.06); --glow-none: rgba(0, 118, 124, 0); } } :root[data-theme="light"] { color-scheme: light; --ground: #f6f2ea; --panel: #fffcf6; --raised: #efe9df; --zebra: #faf6ef; --skeleton: #ebe4d8; --border: #e0d8ca; --border-hover: #d5ccbc; --border-strong: #d5ccbc; --border-emphasis: #938b7e; --text: #1b1916; --text-2: #6b6459; --text-3: #938b7e; --accent: #00767c; --focus: #00c3cb; --price: #00767c; --primary-fill: #1b1916; --primary-hover: #34302a; --primary-pressed: #000000; --on-primary: #f6f2ea; --accent-ink: #f6f2ea; --accent-tint: #e4f2f1; --accent-line: rgba(0, 118, 124, 0.4); --accent-text: #00767c; --success-line: rgba(0, 118, 124, 0.45); --success-glow: 0 0 40px rgba(0, 118, 124, 0.12); --selection: rgba(0, 118, 124, 0.18); --danger: #b23b23; --danger-fill: #fdf1ed; --danger-border: #e3c4ba; --warning: #9a5b00; --warning-fill: #fbf3e4; --warning-line: #e7d3ad; --badge-fill: #1b1916; --badge-ink: #f6f2ea; --progress-track: #ded5c6; --progress-fill: #1b1916; --backdrop: rgba(27, 25, 22, 0.42); --shadow-recommended: 0 16px 40px rgba(27, 25, 22, 0.13); --shadow-panel: 0 20px 56px rgba(27, 25, 22, 0.12); --art-1: #ddd4c5; --art-2: #e6dfd2; --art-3: #ece6db; --art-tile-from: #e9e2d5; --art-tile-to: #f1ebe1; --glow: rgba(0, 118, 124, 0.06); --glow-none: rgba(0, 118, 124, 0); }