/* Theme: SnipSip Ink (id snipsip-ink, the SnipSip product default). Brand direction 2 of the designer's study (design/brand-directions.html, branch design/brand-directions, commit 377e6db9), chosen verbatim by the owner on 2026-10-09: "For brand direction use the designers recommendation." Dark-first, the snipsip.com hero register: ink surfaces, stone text, amber as the one signal color. TYPEFACES (UX83, docs/build-briefs/UX83-snipsip-themes.md). Bricolage Grotesque (display) and Instrument Sans (body and money figures), both SIL Open Font License 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. Latin and latin-ext subsets, font-display: swap. MONEY FIGURES. The designer's study set money in IBM Plex Mono, which is too wide at the floor tablet size (designer finding 2: closeout cards and long drink names crowd). Plex Mono is NOT used. The numeric role is the body face, Instrument Sans, whose OpenType features include tnum, so styles.css sets font-variant-numeric: tabular-nums lining-nums on the money classes under this theme and columns of prices still align. Amber is both the fill (with ink text on it) and the bare-text color on dark, so one value serves both uses. The fixed Prepared/Not Prepared/ danger chips (tokens.css) keep their pale pairing, as on Charcoal: a pale chip on ink is the highest-contrast state signal available. This theme changes only font and color tokens; sizes, spacing and layout come from tokens.css and do not change with the theme. Load after tokens.css, then set data-theme="snipsip-ink" on . CONTROL OUTLINES (UX90, docs/build-briefs/UX90-theme-contrast-and-brand- separation.md). Owner, 2026-10-09: the fields blended into the dark page. --color-border-strong is the outline of every field, select, chip, secondary button and checkbox, and is now #8a816d: 4.9:1 against the page, 4.4:1 against a card and 3.4:1 against the field fill, so WCAG 2.2 non-text contrast (3:1) holds on all three. --color-surface-sunken is the field fill and is now #35301f, a lifted surface lighter than both the page and a card (it was #0f0d0a, darker than the page). text-tertiary moved from #9d9482 to #a79e8c so it still clears 4.5:1 on the lifted fill (5.0:1). The exact ratios are asserted by test/ux83-snipsip-themes.test.ts. AA contrast, measured against this file's own values (ratios are listed in the UX83 brief, section 7; the sunken ratios were re-measured by UX90): text-primary on bg 16.6, on surface 15.1; text-secondary on surface 10.1; text-tertiary on surface 6.4, on surface-sunken 5.0; text-on-accent on accent-strong 9.2; accent-strong on surface 8.6, on accent-subtle 6.9. */ @font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/bricolage-grotesque-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: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/bricolage-grotesque-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: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/instrument-sans-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: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/instrument-sans-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="snipsip-ink"] { --font-family-base: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-family-display: "Bricolage Grotesque", "Arial Narrow", Arial, sans-serif; --font-family-numeric: var(--font-family-base); --color-bg: #14120d; --color-surface: #1f1c15; --color-surface-sunken: #35301f; --color-border: #302b22; --color-border-strong: #8a816d; --color-text-primary: #f5f1e9; --color-text-secondary: #cfc7b6; --color-text-tertiary: #a79e8c; --color-text-on-accent: #17150f; --color-text-on-dark: #f5f1e9; --color-accent: #e8ad5a; --color-accent-strong: #e8ad5a; --color-accent-subtle: #3a2b14; --color-accent-subtle-border: #6b4c1f; --color-focus-ring: rgba(232, 173, 90, 0.6); /* UX95: error red on a dark surface (docs/build-briefs/UX95-dark-theme- error-red.md). Owner: a missed or refused field "needs to stand out in bright red". The fixed #b3261e / #8c1d17 were about 2:1 on this theme's card. Bright red text and borders clear 4.5:1 and 3:1 on the page, card and field fill; the chip is bright red on a dark red tint. Solid fills use --color-danger-fill, which this theme leaves alone. */ --color-danger: #ff6a5c; --color-danger-strong: #ff6a5c; --color-danger-subtle: #3d1a16; --color-danger-subtle-border: #b84a40; /* M5-R10: info colour as bare text on ink (the history sheet, the closeout price-change figures). The fixed --color-info stays for the pale chips. */ --color-info-text: #8fbbe6; /* UX102: success and warning as bare text on this dark surface. The strong tokens stay the dark half of the pale chips and the solid fills; these two are light and clear 4.5:1 on the page, the card and the field fill. */ --color-success-text: #7fd8a0; --color-warning-text: #f0b35a; }