/* ============================================================ S.C.O.P.E. — COLOR SYSTEM "Scientific romanticism": a black void lit by glowing cores. Palette drawn from the institute's wave-function imagery — amber/gold cores, violet & deep-blue regime fields, rare teal and ember-orange transitions, against true black. ============================================================ */ :root { /* ---- Void / surfaces (dark-first) ---- */ --void: #07070b; /* the absolute backdrop */ --bg-0: #0a0a11; /* page background */ --bg-1: #10101a; /* base surface */ --surface-1: #14141f; /* card / panel */ --surface-2: #1b1b29; /* raised / hover */ --surface-3: #232334; /* popover / active */ --overlay-scrim: rgba(5, 5, 9, 0.72); /* ---- Hairlines & borders ---- */ --line-faint: #1e1e2b; --line: #2a2a3b; --line-strong: #3a3a50; /* ---- Ink (warm off-whites, candlelit) ---- */ --ink-0: #f3efe6; /* high-emphasis headings */ --ink-1: #e4e0d6; /* body text */ --ink-2: #a8a499; /* secondary / captions */ --ink-3: #6f6c64; /* tertiary / disabled */ --ink-on-gold: #1a1407; /* text on amber fills */ /* ---- Amber / gold — the glowing core (primary) ---- */ --gold-50: #fbf3df; --gold-300: #ecca7e; --gold-400: #e0a94a; /* PRIMARY accent */ --gold-500: #cf9436; --gold-600: #a9751f; --gold-glow: rgba(224, 169, 74, 0.28); /* ---- Violet — regime fields (secondary) ---- */ --violet-300: #b3a4e6; --violet-400: #8b7bc4; --violet-500: #6f5eaf; --violet-600: #574897; --violet-glow: rgba(139, 123, 196, 0.26); /* ---- Deep blue — substrate / boundary ---- */ --blue-300: #7d93dd; --blue-400: #506bc4; --blue-500: #3a51a6; --blue-600: #2c3d80; /* ---- Teal — coherence / convergence ---- */ --teal-300: #6fcfc6; --teal-400: #3aa6a0; --teal-500: #2c827d; /* ---- Ember orange — transition / divergence ---- */ --ember-300: #f0a06e; --ember-400: #e0703a; --ember-500: #bd5526; /* ---- Crimson — falsification / error ---- */ --crimson-300: #e88c8c; --crimson-400: #d05656; --crimson-500: #a83a3a; /* ============================================================ SEMANTIC ALIASES — reference these in components ============================================================ */ --page-bg: var(--bg-0); --surface-card: var(--surface-1); --surface-raised: var(--surface-2); --surface-popover: var(--surface-3); --border-default: var(--line); --border-subtle: var(--line-faint); --border-strong: var(--line-strong); --text-heading: var(--ink-0); --text-body: var(--ink-1); --text-muted: var(--ink-2); --text-faint: var(--ink-3); --text-link: var(--gold-300); --link-hover: var(--gold-50); --link-underline: var(--gold-600); --notation: var(--gold-300); /* math / scope notation */ --accent: var(--gold-400); --accent-hover: var(--gold-300); --accent-press: var(--gold-500); --accent-quiet: var(--gold-glow); --on-accent: var(--ink-on-gold); --focus-ring: var(--gold-400); /* BC-class / regime semantic colors (used across docs + atlas) */ --bc-coupling: var(--gold-400); --bc-restriction: var(--violet-400); --bc-symmetry: var(--blue-400); --bc-dissipation: var(--teal-400); --bc-forcing: var(--ember-400); --status-ok: var(--teal-400); --status-go: var(--teal-400); --status-pending: var(--gold-400); --status-warn: var(--ember-400); --status-fail: var(--crimson-400); } /* ============================================================ LIGHT THEME — warm-paper mirror of the void. Activate with (or any ancestor). Every component reads semantic vars, so the whole system flips automatically. Accent split: amber carries primary ACTIONS; violet/blue carry NOTATION & LINKS. ============================================================ */ [data-theme="light"] { /* ---- Surfaces — warm paper, clean white cards ---- */ --void: #f1ede3; --bg-0: #faf8f3; --bg-1: #f4f1e8; --surface-1: #ffffff; --surface-2: #f3efe6; --surface-3: #e9e4d7; --overlay-scrim: rgba(250, 248, 243, 0.78); --line-faint: #ece7da; --line: #ddd7c8; --line-strong: #c7bfac; /* ---- Ink — warm near-black on paper ---- */ --ink-0: #1c1a14; --ink-1: #38342b; --ink-2: #6a6555; --ink-3: #9a9483; --ink-on-gold: #2a1d04; /* ---- Amber — darkened to carry on white (primary actions) ---- */ --gold-50: #f7ecd2; --gold-300: #a8741a; --gold-400: #c0881f; --gold-500: #8f6113; --gold-600: #6f4b0e; --gold-glow: rgba(192, 136, 31, 0.22); /* ---- Violet — notation / regime fields ---- */ --violet-300: #5d4ba3; --violet-400: #4f3f93; --violet-500: #463889; --violet-600: #372c6e; --violet-glow: rgba(80, 64, 150, 0.18); /* ---- Deep blue — links / substrate ---- */ --blue-300: #4a63b8; --blue-400: #34499a; --blue-500: #2b3d83; --blue-600: #213066; /* ---- Teal — coherence ---- */ --teal-300: #237a73; --teal-400: #247b75; --teal-500: #1d645f; /* ---- Ember — transition ---- */ --ember-300: #b0531a; --ember-400: #ab5019; --ember-500: #8c4014; /* ---- Crimson — falsification ---- */ --crimson-300: #bd4444; --crimson-400: #a23636; --crimson-500: #842c2c; /* ---- Semantic remaps (mapping changes, not just value) ---- */ --text-link: var(--blue-500); --link-hover: var(--blue-400); --link-underline: var(--blue-300); --notation: var(--violet-500); }