/* ============================================================ CHAMELEON SPACE — COLOR A chameleon changes its skin. So does this brand. ------------------------------------------------------------ 1. INK & PAPER the two constants. Everything sits on near-black or warm newsprint. 2. SPECTRUM 9 fluorescent hues sampled from the mark. Clash them on purpose. WIRED, 1994. 3. SKINS [data-skin="…"] remaps --accent + friends. Flip the whole system to a new color. 4. SEMANTIC what code should actually reference. ============================================================ */ :root { /* ---- 1. INK & PAPER ------------------------------------ */ --ink: #0B0A09; /* near-black, warm */ --ink-soft: #1A1916; /* raised black surface */ --ink-line: #2E2C28; /* hairline on black */ --paper: #F6F1E4; /* warm newsprint */ --paper-2: #ECE5D3; /* shaded paper */ --paper-line: #D9CFB8; /* hairline on paper */ --white: #FFFFFF; /* ---- 2. SPECTRUM (the chameleon) ----------------------- */ --acid: #C6FF1E; /* electric lime */ --lime: #57E40C; /* green */ --cyan: #00E5FF; /* aqua */ --blue: #2B5BFF; /* ultramarine */ --violet: #9B2BFF; /* ultraviolet */ --magenta: #FF2BC4; /* hot pink */ --red: #FF2E2E; /* alarm red */ --orange: #FF7A00; /* solar orange */ --yellow: #FFD400; /* hi-vis yellow */ /* tints / shades used by components */ --acid-deep: #9FD400; --magenta-deep: #D40C9E; --cyan-deep: #00B4C9; --violet-deep: #7A12E0; /* ---- 4. SEMANTIC (reference these) --------------------- */ --bg: var(--paper); --bg-sunk: var(--paper-2); --surface: var(--white); --surface-ink: var(--ink); --text: var(--ink); --text-dim: #6B655A; /* muted on paper */ --text-inverse: var(--paper); --text-on-accent: var(--ink); /* accents are bright → ink text */ --line: var(--paper-line); --line-bold: var(--ink); /* accent + secondary are SKIN-CONTROLLED (see below) */ --accent: var(--acid); --accent-2: var(--magenta); --accent-deep: var(--acid-deep); --on-accent: var(--ink); /* status */ --ok: var(--lime); --info: var(--cyan); --warn: var(--yellow); --bad: var(--red); /* focus ring */ --focus: var(--blue); } /* ============================================================ 3. SKINS — flip [data-skin] on any element (often ) and the accent system re-paints. The default skin is "acid". ============================================================ */ [data-skin="acid"] { --accent: var(--acid); --accent-deep: var(--acid-deep); --accent-2: var(--magenta); --on-accent: var(--ink); } [data-skin="magenta"] { --accent: var(--magenta); --accent-deep: var(--magenta-deep); --accent-2: var(--cyan); --on-accent: var(--white); } [data-skin="cyan"] { --accent: var(--cyan); --accent-deep: var(--cyan-deep); --accent-2: var(--violet); --on-accent: var(--ink); } [data-skin="violet"] { --accent: var(--violet); --accent-deep: var(--violet-deep); --accent-2: var(--acid); --on-accent: var(--white); } [data-skin="solar"] { --accent: var(--orange); --accent-deep: #E06400; --accent-2: var(--yellow); --on-accent: var(--ink); } [data-skin="blue"] { --accent: var(--blue); --accent-deep: #1B3FCC; --accent-2: var(--acid); --on-accent: var(--white); } [data-skin="hi-vis"] { --accent: var(--yellow); --accent-deep: #D9B400; --accent-2: var(--red); --on-accent: var(--ink); } /* ============================================================ INK MODE — drop onto a section to invert to the black ground. Neon-on-black is the brand's loudest register. ============================================================ */ [data-ground="ink"] { --bg: var(--ink); --bg-sunk: var(--ink-soft); --surface: var(--ink-soft); --text: var(--paper); --text-dim: #9A9388; --text-inverse: var(--ink); --line: var(--ink-line); --line-bold: var(--paper); color: var(--text); background: var(--bg); }