/* Accent theme presets (issue #4) — user-selectable, on top of tokens.css's default Nightwire cyan. Each preset overrides only the interactive-accent tokens (never the semantic --color-complete/in-progress/critical hues, so a chosen accent never collides with status pills). Applied by setting data-theme-accent on — see the inline bootstrap script in each page's and public/js/api.js's applyThemeAccent(). Presets only (no free-form picker): keeps every option pre-checked for contrast against --color-page/--color-ink, so there's no accessibility risk from a user-chosen color. */ :root[data-theme-accent="blue"] { --color-primary: #3d7bff; --color-primary-ink: #030f2e; --color-primary-soft: rgba(61, 123, 255, 0.10); --color-primary-strong: #8fb4ff; --color-primary-deep: #1f4fb8; --color-accent: #3d7bff; --color-accent-deep: #8fb4ff; --color-accent-soft: rgba(61, 123, 255, 0.12); --color-cta: #3d7bff; --color-cta-ink: #030f2e; --color-cta-hover: #8fb4ff; --hero-eyebrow: #3d7bff; --hero-cta-bg: #3d7bff; --hero-cta-ink: #030f2e; --accent-100: #e6efff; --accent-200: #bcd4ff; --accent-300: #8fb4ff; --accent-400: #629aff; --accent-500: #3d7bff; --accent-600: #2a5fd6; --accent-700: #1f4fb8; --accent-800: #16357a; --accent-900: #0d1f47; } :root[data-theme-accent="violet"] { --color-primary: #a06bff; --color-primary-ink: #140a2e; --color-primary-soft: rgba(160, 107, 255, 0.10); --color-primary-strong: #cbaaff; --color-primary-deep: #6a3fc4; --color-accent: #a06bff; --color-accent-deep: #cbaaff; --color-accent-soft: rgba(160, 107, 255, 0.12); --color-cta: #a06bff; --color-cta-ink: #140a2e; --color-cta-hover: #cbaaff; --hero-eyebrow: #a06bff; --hero-cta-bg: #a06bff; --hero-cta-ink: #140a2e; --accent-100: #f1e8ff; --accent-200: #dcc4ff; --accent-300: #cbaaff; --accent-400: #b585ff; --accent-500: #a06bff; --accent-600: #7f4de0; --accent-700: #6a3fc4; --accent-800: #452a80; --accent-900: #271748; } :root[data-theme-accent="magenta"] { --color-primary: #ff3fa4; --color-primary-ink: #2e0a1d; --color-primary-soft: rgba(255, 63, 164, 0.10); --color-primary-strong: #ff8bc9; --color-primary-deep: #c41f77; --color-accent: #ff3fa4; --color-accent-deep: #ff8bc9; --color-accent-soft: rgba(255, 63, 164, 0.12); --color-cta: #ff3fa4; --color-cta-ink: #2e0a1d; --color-cta-hover: #ff8bc9; --hero-eyebrow: #ff3fa4; --hero-cta-bg: #ff3fa4; --hero-cta-ink: #2e0a1d; --accent-100: #ffe6f3; --accent-200: #ffc0e2; --accent-300: #ff8bc9; --accent-400: #ff5fb3; --accent-500: #ff3fa4; --accent-600: #e01f85; --accent-700: #c41f77; --accent-800: #7a1449; --accent-900: #470a29; }