/* ── AppZip · colour themes (A/B, commutabili) ─────────────────────────────── Two themes, identical token names, different values. Switch with a single attribute on — [data-theme="electric"] (default) or "warm". Values are the validated base from the handoff (§4.1), tweakable against real content. Contrast rules to honour when wiring components (handoff §4.1): · electric accent #F0682E ≈ 3.4:1 on white → large text / UI only, never small body. · warm primary #E0552A ≈ 3.6:1 on white → white text on coral fills for buttons; for inline text links use primary-hover #B5400F (≈ 5.2:1). Colour never carries meaning alone — states pair with icon/text (handoff §4.1, §7). */ /* Theme A — electric (blue, technical authority). Also the default on :root so the site is themed even if the attribute is absent. */ :root, [data-theme="electric"] { --primary: #185FA5; --primary-hover: #0C447C; --secondary: #0C2350; --accent: #F0682E; --surface: #F4F7FB; --success: #1D9E75; --warning: #BA7517; --error: #C0392B; --info: #2C7BC0; --neutral-50: #F7F9FC; --neutral-100: #E7ECF3; --neutral-200: #CBD5E3; --neutral-300: #94A3B8; --neutral-500: #5B6B85; --neutral-700: #33415C; --neutral-900: #0C1A33; /* Semantic roles read by components, mapped from the palette above. */ --bg: #FFFFFF; --text: var(--neutral-900); --text-muted: var(--neutral-500); --border: var(--neutral-200); --link: var(--primary); --link-hover: var(--primary-hover); --focus-ring: var(--primary); --on-primary: #FFFFFF; /* text/icon on a primary fill */ --on-accent: #FFFFFF; } /* Theme B — warm (coral, recognisability + accessibility). */ [data-theme="warm"] { --primary: #E0552A; --primary-hover: #B5400F; --secondary: #3A2A1E; --accent: #1D7A8C; --surface: #FBF6F0; --success: #0F8A5F; --warning: #B5740E; --error: #C0392B; --info: #1D7A8C; --neutral-50: #FBF7F2; --neutral-100: #F0E7DC; --neutral-200: #DDCDBB; --neutral-300: #A8937E; --neutral-500: #6B5849; --neutral-700: #46362A; --neutral-900: #241812; --bg: #FFFFFF; --text: var(--neutral-900); --text-muted: var(--neutral-500); --border: var(--neutral-200); /* Inline links use the darker hover shade for a legible 5.2:1 (handoff §4.1). */ --link: var(--primary-hover); --link-hover: var(--primary); --focus-ring: var(--primary-hover); --on-primary: #FFFFFF; --on-accent: #FFFFFF; } /* Theme C — neutral (cool grayscale, the base-default skin). Same variable names as the other themes so nothing else changes; a faint blue cast keeps it from reading as flat grey. Contrast is AA throughout: text 17.5:1, muted 5.9:1, link 9.6:1, on-primary 9.6:1 — in line with electric/warm (fixed17.5-step2d). */ [data-theme="neutral"] { --primary: #3A4657; --primary-hover: #2A3542; --secondary: #1E2733; --accent: #4A5A70; --surface: #F2F4F7; --success: #2E7D5B; --warning: #8A6D2F; --error: #B23A3A; --info: #3A4657; --neutral-50: #F7F8FA; --neutral-100: #EAEDF1; --neutral-200: #D3D9E0; --neutral-300: #98A2B0; --neutral-500: #5A6675; --neutral-700: #2E3844; --neutral-900: #151A22; --bg: #FFFFFF; --text: var(--neutral-900); --text-muted: var(--neutral-500); --border: var(--neutral-200); --link: var(--primary); --link-hover: var(--primary-hover); --focus-ring: var(--primary); --on-primary: #FFFFFF; --on-accent: #FFFFFF; }