/* ========================================================================== theme.css — ResultKey colour tokens -------------------------------------------------------------------------- Two FLAT versions, switched by / "black": white white page, dark text, orange buttons, logo wordmark in #360C41 black black page, light text, orange buttons, logo wordmark in white FLAT COLOUR ONLY. There are no gradients anywhere in this file or in style.css — no page washes, no glow orbs, no gradient buttons, no gradient text. Tokens whose names end in "-gradient" are kept only so the component rules that reference them keep working; every one holds a solid colour. Brand colours #360C41 primary — 16.3:1 on white, so safe for text there #D85D27 action — every button, and every icon, in both versions Contrast notes #D85D27 is 3.81:1 on white and 5.51:1 on black. That clears the 3:1 bar for buttons and icons on both, but is BELOW 4.5:1 on white, so it must never carry small body text on the white version. Button labels are near-black (#1A0800) rather than white, which measures 5.11:1 on the orange and is the only combination that passes on both versions. ========================================================================== */ /* -------------------------------------------------------------------------- VERSION 1 — "white" (default) -------------------------------------------------------------------------- */ :root, [data-theme="white"] { /* Page */ --bg-solid: #ffffff; --bg-base: #ffffff; /* Panels. Flat fills, separated from the page by a hairline, not a shadow. */ --surface: #ffffff; --surface-hover: #faf7fb; --bg-surface: #f7f4f9; --bg-elevated: #f1ebf4; /* Dark brand panel punctuating the page */ --bg-brand: #360c41; --text-on-brand: #ffffff; /* Borders */ --border: #e3dce7; --border-soft: rgb(54 12 65 / 14%); --border-bright: #360c41; /* Action colour — buttons and icons */ --accent-gradient: #d85d27; --cta-gradient: #d85d27; /* Brand scale */ --accent-900: #1a0620; --accent-800: #260930; --accent-700: #360c41; --accent-600: #4a1159; --accent-500: #5f1873; --accent-400: #d85d27; /* action */ --accent-300: #e4753f; --accent-200: #f2ac88; --accent-100: #fdefe6; /* Text */ --text-primary: #1a0620; --text-secondary: #453a4a; --text-muted: #655b6b; /* Semantic aliases */ --color-primary: #d85d27; /* buttons are orange in both versions */ --color-primary-hover: #b04818; --color-on-primary: #1a0800; /* 5.11:1 on the orange */ --color-link: #360c41; /* brand primary: 16.3:1 here */ --color-link-hover: #d85d27; --focus-ring: #d85d27; /* The wordmark beside the logo mark */ --logo-text: #360c41; --tint-weak: rgb(216 93 39 / 6%); --tint-soft: rgb(216 93 39 / 12%); --tint-strong: rgb(216 93 39 / 20%); --glow: rgb(54 12 65 / 18%); --shadow-color: 285deg 25% 40%; color-scheme: light; } /* -------------------------------------------------------------------------- VERSION 2 — "black" -------------------------------------------------------------------------- */ [data-theme="black"] { --bg-solid: #000000; --bg-base: #000000; --surface: #101010; --surface-hover: #191919; --bg-surface: #0d0d0d; --bg-elevated: #1a1a1a; /* Plum is too close to black to read as a panel on its own, so the brand block steps up a stop and relies on its border to separate. */ --bg-brand: #4a1159; --text-on-brand: #ffffff; --border: #2b2b2b; --border-soft: rgb(255 255 255 / 16%); --border-bright: #d85d27; --accent-gradient: #d85d27; --cta-gradient: #d85d27; --accent-900: #fdefe6; --accent-800: #f2ac88; --accent-700: #e4753f; --accent-600: #d85d27; --accent-500: #d85d27; --accent-400: #d85d27; /* action */ --accent-300: #e4753f; --accent-200: #f2ac88; --accent-100: #fdefe6; --text-primary: #f7f7f7; --text-secondary: #c9c9c9; --text-muted: #9a9a9a; --color-primary: #d85d27; --color-primary-hover: #e4753f; --color-on-primary: #1a0800; /* 5.11:1 on the orange */ --color-link: #e4753f; /* 6.9:1 on black */ --color-link-hover: #f2ac88; --focus-ring: #e4753f; --logo-text: #ffffff; --tint-weak: rgb(216 93 39 / 10%); --tint-soft: rgb(216 93 39 / 16%); --tint-strong: rgb(216 93 39 / 26%); --glow: rgb(216 93 39 / 28%); --shadow-color: 0deg 0% 0%; color-scheme: dark; } /* -------------------------------------------------------------------------- Status colours — one pair per version so both stay legible -------------------------------------------------------------------------- */ :root, [data-theme="white"] { --color-success: #1c7a44; --color-success-bg: rgb(28 122 68 / 10%); --color-error: #b3261e; --color-error-bg: rgb(179 38 30 / 10%); } [data-theme="black"] { --color-success: #56d98b; --color-success-bg: rgb(86 217 139 / 14%); --color-error: #ff8a80; --color-error-bg: rgb(255 138 128 / 14%); } /* -------------------------------------------------------------------------- Version transition -------------------------------------------------------------------------- */ body, .site-header, .card, .panel, .btn, .tag, .footer { transition: background-color 260ms cubic-bezier(0.4, 0, 0.2, 1), border-color 260ms cubic-bezier(0.4, 0, 0.2, 1), color 260ms cubic-bezier(0.4, 0, 0.2, 1); } @media (prefers-reduced-motion: reduce) { body, .site-header, .card, .panel, .btn, .tag, .footer { transition: none; } }