/* ============================================================ SETTINGS · SEMANTIC COLOR + THEME ENGINE Role-based aliases. Components reference these — never raw hex. Two themes, classic light/dark toggle: - :root → DARK (the machine-console default) - [data-theme=light] → LIGHT (authentic Birren lit field) Both are sourced from the same Birren palette in _color-palette.css. Only the theme-DEPENDENT raw tokens (chassis, bezel, engraved text, per-theme signal brightness) are redefined per theme; the --color-* aliases below are declared once and resolve lazily through var(), so the whole machine flips when [data-theme] changes on . Theme is set on by an inline no-flash script in the layout (localStorage 'theme', falling back to the OS prefers-color-scheme). Absence of the attribute == dark. ============================================================ */ /* ---------- DARK theme — raw tokens (default) ---------- */ :root { /* Chassis — deep Birren gray-green field, value taken down so the brilliant safety code and brand neon pop without eye fatigue. */ --c-void: #06120D; /* beyond the panel; outermost */ --c-chassis-deep: #0B1F17; /* sunken wells, terminal screens */ --c-chassis: #14352A; /* default panel field */ --c-chassis-raised: #1C4636; /* raised modules */ --c-chassis-hi: #275842; /* highlighted module */ /* Bezel — Birren medium-gray chrome. Frames signal, never IS signal. */ --c-bezel-shadow: #0F1A15; --c-bezel-dark: #2A3832; --c-bezel: #5C7268; --c-bezel-light: #82998F; --c-bezel-hi: #A6B8AE; /* polished chrome edge */ /* Steel — neutral brushed silver, the green pulled out. Used for secondary keys that need machined depth without claiming a signal. */ --c-steel-shadow: #2B2F31; --c-steel-dark: #4A4F52; --c-steel: #7C8285; --c-steel-light: #A7ADB0; --c-steel-hi: #D2D7D9; /* polished highlight */ /* Engraved labels — worn ivory / buff on dark */ --c-engraved: #87A093; /* dim engraved text */ --c-label: #C8D6CB; /* default plaque text */ --c-paper: #E6DEAF; /* Birren buff; high-attention only */ /* Signal brightness — Birren safety hues lifted for a dark field. (Fire red et al. are too dark to read on dark, so they're mixed up.) */ --c-signal-magenta: var(--c-brand-hi); /* legacy alias — dormant glow utils only */ --c-signal-cyan: #2E93B0; /* info — brightened caution blue */ --c-signal-coral: #B89A5E; /* secondary — lifted sandalwood */ --c-signal-lime: #25BE6A; /* ok — brightened safety green */ --c-signal-amber: var(--c-solar-yellow); /* caution — already bright */ --c-signal-orange: #F2691C; /* alert — brightened alert orange */ --c-signal-red: #CB2C24; /* danger — brightened fire red */ --c-signal-red-deep: var(--c-fire-red); /* grounded danger borders */ --c-signal-purple: var(--c-sandalwood); /* hazard — earthy */ } /* ---------- LIGHT theme — raw token overrides ---------- */ [data-theme="light"] { /* Chassis — Birren lit field: buff/cream surfaces. The sunken layer stays DARK on purpose: a recessed instrument screen reads dark even in a lit room (see the gauge faces in the control-room reference). */ --c-void: #DAD2B7; /* beige field; outermost page */ --c-chassis-deep: #102A1F; /* sunken wells / terminal screens — dark */ --c-chassis: #EDE8D8; /* default panel — cream */ --c-chassis-raised: #F5F1E5; /* raised module — lighter cream */ --c-chassis-hi: #FCFAF2; /* highlighted module — near white */ /* Bezel — gray chrome on a light field. Light direction inverts: 'shadow' is a warm recess, 'hi' is a near-white polished edge. */ --c-bezel-shadow: #B0A88D; --c-bezel-dark: #7E8A80; --c-bezel: #68867C; --c-bezel-light: #9DAEA4; --c-bezel-hi: #E8EEE6; /* polished highlight edge */ /* Steel — neutral brushed silver on a light field. Lit from above: 'hi' is near-white, 'shadow' a warm metal recess. */ --c-steel-shadow: #9DA3A0; --c-steel-dark: #B7BCBA; --c-steel: #CDD2D0; --c-steel-light: #E2E6E4; --c-steel-hi: #FBFCFB; /* polished highlight */ /* Engraved labels — dark gray-green ink on cream */ --c-engraved: #6E7A70; /* dim engraved text */ --c-label: #36443B; /* default plaque text */ --c-paper: #1E2A23; /* near-black; high-attention only */ /* Signal — Birren safety code used AS PRINTED. The brilliant column was tuned for a light field, so full chroma reads correctly here. */ --c-signal-cyan: var(--c-caution-blue); /* info */ --c-signal-coral: var(--c-sandalwood); /* secondary */ --c-signal-lime: var(--c-safety-green); /* ok */ --c-signal-amber: #B58A00; /* caution — solar yellow darkened for cream */ --c-signal-orange: var(--c-alert-orange); /* alert */ --c-signal-red: var(--c-fire-red); /* danger */ --c-signal-red-deep: #5A0101; /* grounded danger borders */ --c-signal-purple: var(--c-sandalwood); /* hazard */ /* --c-signal-magenta inherits the brand from :root */ } /* ---------- Semantic aliases — declared once, flip via var() ---------- */ :root { /* Backgrounds — value gradient: field → recessed */ --color-bg: var(--c-void); --color-surface: var(--c-chassis); --color-surface-raised: var(--c-chassis-raised); --color-surface-hi: var(--c-chassis-hi); --color-surface-sunken: var(--c-chassis-deep); /* Bezel / chrome — frames signal, never IS signal */ --color-bezel: var(--c-bezel); --color-bezel-dark: var(--c-bezel-dark); --color-bezel-light: var(--c-bezel-light); --color-bezel-hi: var(--c-bezel-hi); --color-bezel-shadow: var(--c-bezel-shadow); /* Steel / silver — neutral machined keys (secondary actions) */ --color-steel: var(--c-steel); --color-steel-dark: var(--c-steel-dark); --color-steel-light: var(--c-steel-light); --color-steel-hi: var(--c-steel-hi); --color-steel-shadow: var(--c-steel-shadow); /* Text — engraved plaque hierarchy */ --color-text: var(--c-label); --color-text-strong: var(--c-paper); --color-text-muted: var(--c-engraved); --color-text-inverse: var(--c-chassis-deep); /* Phosphor — terminals, readouts (constant; screens stay dark) */ --color-phosphor: var(--c-phosphor-green); --color-phosphor-amber: var(--c-phosphor-amber); --color-phosphor-cyan: var(--c-phosphor-cyan); /* Signal roles — restrained. Each color earns its meaning. Brand pink/blue are NOT a signal role: they're reserved for the site wordmark and hero highlight (--gradient-vapor) only. Primary action uses Birren's caution blue — distinct from "ok" green. */ --color-primary: var(--c-signal-cyan); /* caution blue / primary action */ --color-accent: var(--c-signal-cyan); /* selection / focus */ --color-secondary: var(--c-signal-coral); --color-ok: var(--c-signal-lime); --color-info: var(--c-signal-cyan); --color-caution: var(--c-signal-amber); --color-alert: var(--c-signal-orange); --color-danger: var(--c-signal-red); --color-danger-grounded: var(--c-signal-red-deep); --color-hazard: var(--c-signal-purple); /* Borders */ --color-border: color-mix(in srgb, var(--c-bezel) 70%, transparent); --color-border-strong: var(--c-bezel-light); --color-border-engraved: color-mix(in srgb, var(--c-bezel-shadow) 80%, var(--c-black)); /* Focus ring — accent blue, always glows */ --color-focus: var(--c-signal-cyan); }