/* ── Iterative.media · Color ────────────────────────────────────── The system runs on a RETRO PHOSPHOR TERMINAL identity by default: a true-black CRT canvas, phosphor-green accent + ink, a deeper amber second voice. High-contrast, after-dark, screen-native — a green monochrome monitor glowing in a dark room. The original golden-hour warm system is preserved as one opt-in alternate: . (The old violet/magenta "cyber" system has been removed.) Base values first, then semantic aliases. Always style against the semantic aliases (--text-body, --surface-card, --accent…). ----------------------------------------------------------------- */ :root { /* ── Phosphor surfaces · CRT black with a green cast ────────── */ --crt: #030A05; /* page base — near-black, faint green */ --crt-deep: #010402; /* sunken / deepest black */ --crt-panel: #08160D; /* banded / cream-equivalent */ --crt-panel-2: #0C2014; /* raised cards */ --crt-line: #154A2B; /* hairlines, dividers (dim green) */ --crt-strong: #1F6B3E; /* emphasized edges, inputs */ /* ── Phosphor ink · green monochrome ───────────────────────── */ --p-0: #D6FFE4; /* headings — bright phosphor white-green */ --p-1: #7CFFB0; /* body — readable phosphor green */ --p-2: #45C97A; /* muted */ --p-3: #2E8E54; /* subtle, placeholders */ --p-4: #1C5A36; /* faint, disabled */ /* ── Green accent + amber secondary ─────────────────────────── */ --green: #00FF66; /* primary accent — fills, marks */ --green-bright: #4DFF95; /* hover lift */ --green-press: #00CC52; /* pressed / active */ --green-soft: #7CFFB0; /* green as TEXT on dark */ --green-tint: #082815; /* soft wash / hover bg */ --amber: #FFB000; /* amber-monitor secondary */ --amber-deep: #C77F00; /* amber as text/icon */ /* ── Status · tuned for the phosphor canvas ─────────────────── */ --sage: #4ADE80; /* success / done */ --clay: #FF5C57; /* danger / destructive (CRT red) */ --honey: #FFB000; /* warning / attention */ --slate: #57C7FF; /* info / neutral note */ /* ── Sunset alternate · warm base tokens (kept for the */ /* Sunset theme + specimen cards; not the default) ──────────*/ --paper: #FCF8F0; --cream: #F4ECDC; --cream-deep: #EDE3CF; --card: #FFFDF8; --border: #E7DDC9; --border-strong:#D6C8AE; --ink: #2B2723; --ink-muted: #5E564B; --ink-subtle: #8B8170; --ink-faint: #B6AD9B; --coral: #D85436; --coral-bright: #E5613F; --coral-press: #BC4527; --coral-tint: #FBE7DC; --amber-warm: #E59A3C; --amber-warm-deep: #C27E27; --amber-tint: #FBEFD6; --dusk: #7A4536; /* ── Semantic aliases · PHOSPHOR (default) ─────────────────── */ --surface-page: var(--crt); --surface-cream: var(--crt-panel); --surface-sunken: var(--crt-deep); --surface-card: var(--crt-panel-2); --text-heading: var(--p-0); --text-body: var(--p-1); --text-muted: var(--p-2); --text-subtle: var(--p-3); --text-faint: var(--p-4); --text-accent: var(--green-soft); --text-on-accent:#031007; --border-default: var(--crt-line); --border-emph: var(--crt-strong); --accent: var(--green); --accent-hover: var(--green-bright); --accent-press: var(--green-press); --accent-tint: var(--green-tint); --accent-contrast:#031007; /* legacy aliases used around the system point at the active accent */ --coral-ink: var(--green-soft); /* the glitch RGB-split + cyan badge read --cyan; on phosphor it is amber */ --cyan: var(--amber); --focus-ring: color-mix(in oklab, var(--green) 60%, transparent); --selection: var(--green-tint); } /* ── Sunset alternate theme · the original golden-hour system ──── Opt in with or .theme-sunset. */ [data-theme="sunset"], .theme-sunset { --surface-page: var(--paper); --surface-cream: var(--cream); --surface-sunken: var(--cream-deep); --surface-card: var(--card); --text-heading: var(--ink); --text-body: var(--ink); --text-muted: var(--ink-muted); --text-subtle: var(--ink-subtle); --text-faint: var(--ink-faint); --text-accent: var(--coral-press, #B0401F); --text-on-accent:#FFF9F2; --border-default: var(--border); --border-emph: var(--border-strong); --accent: var(--coral); --accent-hover: var(--coral-bright); --accent-press: var(--coral-press); --accent-tint: var(--coral-tint); --accent-contrast:#FFF9F2; --coral-ink: #B0401F; --focus-ring: color-mix(in oklab, var(--coral) 55%, transparent); --selection: var(--coral-tint); }