/* ========================================================================== ComputingCache palettes Every palette defines the same token set twice: once dark, once light. styles.css never names a hue, so swapping the whole site's colour scheme means changing one attribute on and nothing else: Omit data-palette (or use "phosphor") for the default. Available: phosphor (default) · amber · steel · violet Theme resolution is three-state, and each palette repeats the pattern: 1. dark tokens on the bare selector -> dark is the design default 2. light under prefers-color-scheme: light, -> follows the OS… guarded by :not([data-theme="dark"]) …unless the user chose dark 3. light again under [data-theme="light"] -> explicit choice always wins --accent-on is the foreground for text sitting ON an accent fill. It is a separate token because a bright accent needs dark text while a deep one needs white, and getting this wrong is the usual way a palette swap breaks button contrast. ========================================================================== */ /* ── Phosphor green on carbon (default) ──────────────────────────────── */ :root, :root[data-palette="phosphor"] { --bg: #080b09; --bg-alt: #0c110e; --bg-card: #0f1512; --text: #dcf0e2; --text-muted: #7f9a89; --border: #1d2a23; --shadow: 0 4px 24px rgba(0, 0, 0, 0.5); --accent: #34d399; --accent-light: #6ee7b7; --accent-dim: rgba(52, 211, 153, 0.13); --accent-on: #04231a; --accent-alt: #a3e635; --ok: #4ade80; --warn: #fbbf24; --danger: #f87171; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]), :root[data-palette="phosphor"]:not([data-theme="dark"]) { --bg: #f4f7f4; --bg-alt: #ffffff; --bg-card: #ffffff; --text: #0d1410; --text-muted: #4f6558; --border: #d4e2d9; --shadow: 0 4px 20px rgba(10, 30, 20, 0.08); --accent: #047857; --accent-light: #065f46; --accent-dim: rgba(4, 120, 87, 0.10); --accent-on: #ffffff; --accent-alt: #4d7c0f; --ok: #15803d; --warn: #b45309; --danger: #b91c1c; } } :root[data-theme="light"], :root[data-palette="phosphor"][data-theme="light"] { --bg: #f4f7f4; --bg-alt: #ffffff; --bg-card: #ffffff; --text: #0d1410; --text-muted: #4f6558; --border: #d4e2d9; --shadow: 0 4px 20px rgba(10, 30, 20, 0.08); --accent: #047857; --accent-light: #065f46; --accent-dim: rgba(4, 120, 87, 0.10); --accent-on: #ffffff; --accent-alt: #4d7c0f; --ok: #15803d; --warn: #b45309; --danger: #b91c1c; } /* ── Amber & copper on ink ───────────────────────────────────────────── */ :root[data-palette="amber"] { --bg: #0b0a09; --bg-alt: #100e0c; --bg-card: #141210; --text: #f0e9e0; --text-muted: #9a8b7a; --border: #2a231c; --shadow: 0 4px 24px rgba(0, 0, 0, 0.5); --accent: #f59e0b; --accent-light: #fbbf24; --accent-dim: rgba(245, 158, 11, 0.13); --accent-on: #221603; --accent-alt: #c2703d; --ok: #4ade80; --warn: #fb923c; --danger: #f87171; } @media (prefers-color-scheme: light) { :root[data-palette="amber"]:not([data-theme="dark"]) { --bg: #faf8f5; --bg-alt: #ffffff; --bg-card: #ffffff; --text: #1a1613; --text-muted: #6b5c4d; --border: #e5dcd0; --shadow: 0 4px 20px rgba(40, 30, 20, 0.08); --accent: #b45309; --accent-light: #92400e; --accent-dim: rgba(180, 83, 9, 0.10); --accent-on: #ffffff; --accent-alt: #9a4f24; --ok: #15803d; --warn: #c2410c; --danger: #b91c1c; } } :root[data-palette="amber"][data-theme="light"] { --bg: #faf8f5; --bg-alt: #ffffff; --bg-card: #ffffff; --text: #1a1613; --text-muted: #6b5c4d; --border: #e5dcd0; --shadow: 0 4px 20px rgba(40, 30, 20, 0.08); --accent: #b45309; --accent-light: #92400e; --accent-dim: rgba(180, 83, 9, 0.10); --accent-on: #ffffff; --accent-alt: #9a4f24; --ok: #15803d; --warn: #c2410c; --danger: #b91c1c; } /* ── Steel blue & signal orange ──────────────────────────────────────── */ :root[data-palette="steel"] { --bg: #0a0d12; --bg-alt: #0e131a; --bg-card: #121821; --text: #e3e9f2; --text-muted: #8494a8; --border: #202b38; --shadow: 0 4px 24px rgba(0, 0, 0, 0.5); --accent: #5b8db8; --accent-light: #86b3d9; --accent-dim: rgba(91, 141, 184, 0.15); --accent-on: #06131f; --accent-alt: #ff7a2f; --ok: #4ade80; --warn: #ff7a2f; --danger: #f87171; } @media (prefers-color-scheme: light) { :root[data-palette="steel"]:not([data-theme="dark"]) { --bg: #f4f6f9; --bg-alt: #ffffff; --bg-card: #ffffff; --text: #10151c; --text-muted: #55647a; --border: #d6dee9; --shadow: 0 4px 20px rgba(16, 24, 40, 0.08); --accent: #2c6390; --accent-light: #1e4a6d; --accent-dim: rgba(44, 99, 144, 0.10); --accent-on: #ffffff; --accent-alt: #c2410c; --ok: #15803d; --warn: #c2410c; --danger: #b91c1c; } } :root[data-palette="steel"][data-theme="light"] { --bg: #f4f6f9; --bg-alt: #ffffff; --bg-card: #ffffff; --text: #10151c; --text-muted: #55647a; --border: #d6dee9; --shadow: 0 4px 20px rgba(16, 24, 40, 0.08); --accent: #2c6390; --accent-light: #1e4a6d; --accent-dim: rgba(44, 99, 144, 0.10); --accent-on: #ffffff; --accent-alt: #c2410c; --ok: #15803d; --warn: #c2410c; --danger: #b91c1c; } /* ── Violet (the original) ───────────────────────────────────────────── */ :root[data-palette="violet"] { --bg: #0c0c13; --bg-alt: #10101a; --bg-card: #14141f; --text: #e4e4f2; --text-muted: #8a8aa8; --border: #26263a; --shadow: 0 4px 24px rgba(0, 0, 0, 0.45); --accent: #8b5cf6; --accent-light: #a78bfa; --accent-dim: rgba(139, 92, 246, 0.14); --accent-on: #ffffff; --accent-alt: #22d3ee; --ok: #4ade80; --warn: #fbbf24; --danger: #f87171; } @media (prefers-color-scheme: light) { :root[data-palette="violet"]:not([data-theme="dark"]) { --bg: #f5f5f9; --bg-alt: #ffffff; --bg-card: #ffffff; --text: #16161d; --text-muted: #5b5b78; --border: #dcdce8; --shadow: 0 4px 20px rgba(20, 20, 40, 0.08); --accent: #6d28d9; --accent-light: #5b21b6; --accent-dim: rgba(109, 40, 217, 0.10); --accent-on: #ffffff; --accent-alt: #0e7490; --ok: #15803d; --warn: #b45309; --danger: #b91c1c; } } :root[data-palette="violet"][data-theme="light"] { --bg: #f5f5f9; --bg-alt: #ffffff; --bg-card: #ffffff; --text: #16161d; --text-muted: #5b5b78; --border: #dcdce8; --shadow: 0 4px 20px rgba(20, 20, 40, 0.08); --accent: #6d28d9; --accent-light: #5b21b6; --accent-dim: rgba(109, 40, 217, 0.10); --accent-on: #ffffff; --accent-alt: #0e7490; --ok: #15803d; --warn: #b45309; --danger: #b91c1c; }