/* 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 color tokens and the three font tokens below; every other token (sizes, weights, spacing, layout) comes from tokens.css and does not change with the theme. TYPEFACES (UX82, owner directive 2026-10-09, brand guide): Proxima Nova leads (geometric sans), Bitter Italic supports (subheads and hint lines). Proxima Nova is licensed by Scissors & Scotch (owner confirmation 2026-10-09, UX82-F1) and ships as latin-subset woff2 (regular 400, bold 700 serving 600 to 700, and ExtraBold 800 for headlines, UX82-F2) converted from the shop's own web font files. Montserrat (the brand guide's stated closest fallback, kept for glyphs outside the latin subset) and Bitter are SIL OFL 1.1, self-hosted as woff2 under design/fonts/ with their license texts, served by the same /design/ path as this file, never a CDN. The @font-face rules sit in THIS file, which is loaded only while this theme is active, and a browser fetches a face only when text uses it, so other themes download no font bytes. Latin and latin-ext subsets, font-display: swap (text shows in the system stack first, then swaps). Variable fonts: Montserrat 400 to 800, Bitter 400 to 700 (italic only; Bitter is used only for the italic accent role). UX90 (docs/build-briefs/UX90-theme-contrast-and-brand-separation.md), owner 2026-10-09: "SnipSip Light and Scissors & Scotch look almost exactly the same." Scissors & Scotch now reads as the shop: a warmer cream page (#f3ebdc) with warm tan wells and outlines, a Whiskey Brown top bar with a S&S Red rule, bold Proxima Nova headings, and Bitter Italic on section descriptions (see the labelled UX90 block in harness/ui/styles.css). Proxima Nova ships in two faces only (regular 400 to 500, bold 600 to 800), so every heading weight from 600 up renders in the one bold face. AA contrast checked against this file's own bg/surface (UX90 values; see design/README.md for the older table): text-primary on bg 12.2:1 text-primary on surface 14.2:1 text-secondary on bg 6.5:1 text-tertiary on surface 6.4:1 text-tertiary on surface-sunken 5.0:1 text-on-accent on accent-strong 10.3:1 brand cream on brand brown 12.2:1 */ /* Self-hosted faces; see the TYPEFACES note above. Paths are relative to this file. */ @font-face { font-family: "Proxima Nova"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("../fonts/proximanova-regular-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Proxima Nova"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("../fonts/proximanova-bold-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Proxima Nova"; font-style: normal; font-weight: 800 900; font-display: swap; src: url("../fonts/proximanova-extrabold-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/montserrat-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/montserrat-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Bitter"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../fonts/bitter-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Bitter"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("../fonts/bitter-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } [data-theme="brass"] { --color-bg: #f3ebdc; --color-surface: #fffdf8; --color-surface-sunken: #ebe0cc; --color-border: #dccdb4; --color-border-strong: #a08763; /* 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: #7e5442; --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); /* The three literal brand colors (UX90), for the page frame only: the top bar in Whiskey Brown with cream text and a thin S&S Red rule under it (harness/ui/styles.css, the labelled UX90 block). Red is an accent rule, never a field fill, per the brand guide; ED1C24 is not used for text (3.3:1 on Whiskey Brown, 4.4:1 on white). */ --color-brand-brown: #461e0d; --color-brand-red: #ed1c24; --color-brand-cream: #f6ead8; --color-brand-cream-muted: #dcc7a8; /* Typefaces (UX82). Fonts only: no size, weight or spacing token here. Base and display are the same Proxima Nova stack; the brand guide's hierarchy (headlines bold, body regular) comes from the weights the components already set. Accent is Bitter Italic for subheads and hint lines, with Georgia then a generic serif as the fallback. */ --font-family-base: "Proxima Nova", Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-family-display: var(--font-family-base); --font-family-accent: Bitter, Georgia, "Times New Roman", serif; --font-style-accent: italic; }