/* Theme: Scissors & Scotch (default, current) Internal key/file stay "brass" for storage compatibility: the theme id persisted in localStorage (harness/ui/src/theme.ts, THEME_STORAGE_KEY), any per-location config already pointing at "brass", and this file's own name are unchanged by the rename. Tradeoff accepted deliberately (product owner theming directive, Amendment 2026-08-21 (eighth) to docs/superpowers/plans/2026-08-19-alpha-work-breakdown.md): renaming the key too would mean migrating every stored "brass" value across devices and any future per-location config for zero user-visible benefit, since nothing about the id is shown to a user. Only the DISPLAY LABEL changes, everywhere a person sees it (THEME_OPTIONS.label in theme.ts, this panel's name in theme-gallery.html, this file's own name below). Register: the shop's own brand palette, built on the 2022 S&S Brand Style Guide (S&S Red ED1C24, Whiskey Brown 461E0D) per the vault's Visual Identity note: red as accent, never a field color; brown or near-black text; warm off-white backgrounds; contrast verified. Warm ivory surface, Whiskey Brown text, a deep brand-derived red accent for primary actions and selection. ACCENT VALUE, read before changing it: --color-accent-strong is NOT the literal S&S Red (ED1C24). Product owner ruling, Amendment 2026-08-21 (ninth): "a deeper red that sits off the official palette but matches the brand well is perfectly acceptable as the ACCENT, and the brighter official-palette red is used for ERROR states." ED1C24 on a white or near-white surface measures ~4.4:1, under the 4.5:1 AA floor for normal text (see docs/design contrast verification), which is what first raised the question the ninth amendment answers: the accent below is a deep, brand-matched wine red (hue ~338, well off ED1C24's hue ~358), chosen BOTH because it clears AA with real margin everywhere it carries text and because its hue and lightness sit clearly apart from design/tokens.css's fixed --color-danger family, which stays in the brighter ED1C24-adjacent range by the same ruling. See design/README.md "Distinctness from the fixed semantic hues" for the checked separation and why a selected state never reads as an error state on this theme. Load after tokens.css, then set data-theme="brass" on (or any ancestor of the app root). This file changes nothing except the surface, text, and accent tokens below; every other token comes from tokens.css and does not change with the theme. AA contrast checked against this file's own bg/surface (see design/README.md for the full checked-pairs table): text-primary on bg 13.2:1 text-primary on surface 14.5:1 text-secondary on surface 7.7:1 text-tertiary on surface 5.6:1 text-tertiary on surface-sunken 4.6:1 text-on-accent on accent-strong 10.3:1 */ [data-theme="brass"] { --color-bg: #f7f4ee; --color-surface: #ffffff; --color-surface-sunken: #efeae1; --color-border: #e3ddd0; --color-border-strong: #cfc6b3; /* Text anchored in Whiskey Brown (461E0D) per the brand guide, darkest at text-primary (the literal brand color) and lightened at the same hue for the secondary/tertiary steps below it. */ --color-text-primary: #461e0d; --color-text-secondary: #7a452e; /* Darkened from #906451 on 2026-08-30. The pairs table above checked tertiary against `surface` (white) and passed at 5.1:1, but the token is also used on `surface-sunken`, which was never in the table: there it measured 4.25:1 and missed the 4.5:1 AA minimum. Found by e2e/accessibility.spec.ts's contrast sweep, which reads the background a run of text is ACTUALLY painted on rather than the one a table assumed. Same hue ramp toward text-primary, moved the minimum distance that clears the threshold on every surface in this theme. */ --color-text-tertiary: #8a5e4c; --color-text-on-accent: #fffaf2; --color-text-on-dark: #f6f2e9; /* Deep, brand-matched red, off the official ED1C24 palette by design (Amendment 2026-08-21, ninth). accent-strong is the text-bearing and button-background variant; both uses are covered by the same darkened value so nothing needed a second, separately-tuned color. */ --color-accent: #962c53; --color-accent-strong: #711e3c; --color-accent-subtle: #f9ecf1; --color-accent-subtle-border: #e1b7c6; --color-focus-ring: rgba(113, 30, 60, 0.45); }