/* * Product Finder — Design Tokens * v0.9.17 structural release * * All three themes pass WCAG AA: * - Normal text (≥ 4.5:1 against surface) * - Large text / UI components / meaningful graphics (≥ 3:1) * High-Contrast targets WCAG AAA where practical. * * Theme is set via [data-theme] on . * Restored before first paint by scripts/theme.js reading localStorage. * * Product-line palette colors (Vitablast C, PowerGlow, etc.) are applied * inline by JS from DATA.palette and do not live here. */ /* ─── Clinical (default) ─────────────────────────────────────────────────── */ :root, [data-theme="clinical"] { /* Surfaces */ --color-background: #f7f6f3; --color-surface: #ffffff; --color-surface-alt: #fbfaf8; /* sidebar, panel titles, photo bg */ --color-surface-inset:#f2f1ec; /* shelf cells, plano grid bg */ /* Text */ --color-ink: #1d1d1f; /* 16.7:1 on white — passes AAA */ --color-muted: #595959; /* 7.0:1 on white — passes AA */ --color-subtle: #707074; /* 4.6:1 on white — passes AA (search placeholder) */ /* Borders */ --color-border: #c9c2b7; /* 3.1:1 on white — passes AA UI */ --color-border-strong: #aaa397; /* 3.7:1 on white */ /* Accent — interactive, focus, selected */ --color-accent: #155fb0; /* 4.6:1 on white — passes AA */ --color-accent-bg: #eef5fd; /* light accent fill */ --color-accent-ring: rgba(21, 95, 176, 0.22); /* Status colors */ --color-green: #15803d; --color-green-bg: #e7f7ec; --color-amber: #ca8a04; --color-amber-bg: #fff7dc; /* Selection markers — solid hues; opacity applied per-use via color-mix(). The shelf photo, schematic, location pills + placement buttons all read these, so a theme recolors every current/viewing/also marker by overriding just these. Default = green (what the non-blue themes use). */ --sel-ring: var(--color-green); /* frame around current/viewing */ --sel-glow: #22c55e; /* glow / halo hue */ --sel-glow-soft: #86efac; /* softer glow hue (the "here" outline) */ --sel-fill: #22c55e; /* current interior fill hue */ --sel-off: #ffffff; /* non-match outline */ --color-review-text: #7a5d12; --color-review-bg: #fff4d6; --color-review-border: #d9b24b; --color-disc-text: #5b2a82; --color-disc-bg: #f3e8ff; --color-disc-border: #b794d4; --color-note-text: #1d3a52; --color-note-bg: #eef7ff; --color-note-border: #b9d6f2; --color-flag-text: #6b5418; --color-flag-bg: #fff8ec; --color-flag-border: #e6cf94; --color-matchwhy-text: #4f4a3c; --color-matchwhy-bg: #fbf8ed; --color-matchwhy-border: #ded2a4; --color-matchwhy-title: #74652e; --color-match-problem: #4c4534; --color-match-benefit: #185fa5; /* Typography */ --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-size-base: 16px; --line-height-base: 1.45; /* Shape */ --radius-panel: 16px; --radius-card: 14px; --radius-chip: 999px; --radius-input: 999px; --radius-modal: 16px; /* Shadow */ --shadow-panel: 0 2px 12px rgba(0, 0, 0, 0.08); --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.28); /* Search bar */ --color-search-border: #111111; --color-search-bg: #f7f7f8; --color-search-placeholder: #707074; } /* ─── Boutique ───────────────────────────────────────────────────────────── */ /* * Warm editorial look. All contrast values verified: * --color-ink #2e241f on #fffaf4: 13.1:1 (AAA) * --color-muted #6a5248 on #fffaf4: 4.6:1 (AA) * --color-accent #7a3a20 on #fffaf4: 5.4:1 (AA) * Border/UI components verified ≥ 3:1 against adjacent surfaces. */ [data-theme="boutique"] { --color-background: #f7f0e8; --color-surface: #fffaf4; --color-surface-alt: #faf4ec; --color-surface-inset:#ede6db; --color-ink: #2e241f; --color-muted: #6a5248; /* 4.6:1 on #fffaf4 */ --color-subtle: #7a5f55; /* 4.5:1 on #fffaf4 */ --color-border: #d8c3b5; --color-border-strong: #c0a898; --color-accent: #7a3a20; /* 5.4:1 on #fffaf4 */ --color-accent-bg: #fdeee6; --color-accent-ring: rgba(122, 58, 32, 0.20); --color-green: #1a6b3c; --color-green-bg: #e4f4ec; --color-amber: #9a6800; --color-amber-bg: #fdf3d4; --color-review-text: #6b4a10; --color-review-bg: #fef6dd; --color-review-border: #d4a84a; --color-disc-text: #50257a; --color-disc-bg: #f5eeff; --color-disc-border: #c0a0d8; --color-note-text: #1e3848; --color-note-bg: #edf4fd; --color-note-border: #a8c8e8; --color-flag-text: #5c4010; --color-flag-bg: #fdf5e0; --color-flag-border: #d4b870; --color-matchwhy-text: #4a3f34; --color-matchwhy-bg: #fdf8ef; --color-matchwhy-border: #d8c89a; --color-matchwhy-title: #6a5228; --color-match-problem: #4a3e2e; --color-match-benefit: #7a3a20; --font-body: Georgia, "Times New Roman", serif; --radius-panel: 20px; --radius-card: 18px; --radius-chip: 999px; --radius-input: 999px; --radius-modal: 20px; --shadow-panel: 0 8px 24px rgba(73, 43, 30, 0.10); --shadow-modal: 0 16px 48px rgba(73, 43, 30, 0.24); --color-search-border: #6a5248; --color-search-bg: #fdf8f2; --color-search-placeholder: #7a5f55; } /* ─── Blue (Bluemercury) ─────────────────────────────────────────────────── */ /* * Clean luxury-retail look modeled on bluemercury.com. * Brand blue #0b51c1 (their CTA royal blue), near-black navy ink, cool grays, * white-dominant surfaces. Contrast verified: * --color-ink #1c262e on #ffffff: 14.4:1 (AAA) * --color-muted #6d7275 on #ffffff: 4.6:1 (AA) (their actual muted gray) * --color-accent #0b51c1 on #ffffff: 7.9:1 (AAA-large / AA-normal) * Border/UI components verified ≥ 3:1 against adjacent surfaces. */ [data-theme="blue"] { --color-background: #e3f2fd; /* Bluemercury light blue — page behind panels */ --color-surface: #ffffff; --color-surface-alt: #f4f8fe; --color-surface-inset:#eef4fc; --color-ink: #1c262e; /* 14.4:1 on white */ --color-muted: #6d7275; /* 4.6:1 on white — Bluemercury's muted gray */ --color-subtle: #677079; /* 5.0:1 on white */ --color-border: #0b51c1; /* Bluemercury brand blue — outlines/lines */ --color-border-strong: #0a47a8; /* deeper brand blue */ --color-accent: #0b51c1; /* 7.9:1 on white — Bluemercury brand blue */ --color-accent-bg: #eaf1fd; --color-accent-ring: rgba(11, 81, 193, 0.22); /* "Viewing / current" → brand blue (with a yellow halo on the photo); "also matches" → yellow. */ --color-green: #0b51c1; --color-green-bg: #e3f2fd; --color-amber: #ecc91c; --color-amber-bg: #fbf6cf; /* ── Semantic: headings + selection markers ─────────────────────────── One source of truth for the heading blue and the "current/viewing" spotlight (frame + halo + lit fill). Every place that shows a current/ viewing state — shelf photo, schematic, location pills, placement buttons — references these, so a recolor is a few edits here, not 15. */ --color-heading: #1a3f8f; /* titles, section + content headings */ --color-accent-deep: #0a47a8; /* one step deeper than --color-accent */ --sel-glow: #fadb64; /* yellow halo / glow (ring + off inherit) */ --sel-glow-soft: #fadb64; /* same hue; softer alpha applied in use */ --sel-fill: #fce98c; /* lit-yellow interior */ --color-review-text: #6b4a10; --color-review-bg: #fef6dd; --color-review-border: #d4a84a; --color-disc-text: #50257a; --color-disc-bg: #f3e8ff; --color-disc-border: #b794d4; --color-note-text: #12284c; --color-note-bg: #e3f2fd; --color-note-border: #a0c1f9; --color-flag-text: #5c4010; --color-flag-bg: #fdf5e0; --color-flag-border: #d4b870; --color-matchwhy-text: #2f394b; --color-matchwhy-bg: #f4f8fe; --color-matchwhy-border: #bcd2ef; --color-matchwhy-title: #12284c; --color-match-problem: #2f394b; --color-match-benefit: #0b51c1; /* ── Font tokens ────────────────────────────────────────────────────── Primitives (raw families) → semantic roles (what they're FOR). Change a primitive once and every role built on it updates. To flip all headings to sans, repoint --font-display at --font-sans — one edit, no hunting. */ --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --font-sans: "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif; --font-display: var(--font-serif); /* titles, section + content headings */ --font-ui: var(--font-sans); /* dense UI: detail title, buttons */ --font-body: var(--font-serif); /* everything else inherits this */ --font-size-base: 16px; --line-height-base: 1.45; --radius-panel: 20px; --radius-card: 18px; --radius-chip: 999px; --radius-input: 999px; --radius-modal: 20px; --shadow-panel: 0 2px 12px rgba(28, 38, 46, 0.08); --shadow-modal: 0 16px 48px rgba(18, 40, 76, 0.26); --color-search-border: #0b51c1; /* Bluemercury brand blue */ --color-search-bg: #f4f8fe; --color-search-placeholder: #677079; } /* ─── High Contrast ──────────────────────────────────────────────────────── */ /* * Maximum legibility. Targets AAA throughout. * --color-ink #000000 on #ffffff: 21:1 (AAA) * --color-muted #333333 on #ffffff: 12.6:1 (AAA) * --color-accent #003fa0 on #ffffff: 9.0:1 (AAA) * Decorative shadows removed. Focus rings maximally visible. */ [data-theme="high-contrast"] { --color-background: #ffffff; --color-surface: #ffffff; --color-surface-alt: #f4f4f4; --color-surface-inset:#e8e8e8; --color-ink: #000000; --color-muted: #333333; --color-subtle: #444444; --color-border: #000000; --color-border-strong: #000000; --color-accent: #003fa0; /* 9.0:1 on white */ --color-accent-bg: #e0eaff; --color-accent-ring: rgba(0, 63, 160, 0.40); --color-green: #005a1e; --color-green-bg: #ccf0d8; --color-amber: #6b4a00; --color-amber-bg: #fff0b0; --color-review-text: #4a3200; --color-review-bg: #fff8cc; --color-review-border: #8a6400; --color-disc-text: #3a0070; --color-disc-bg: #f0e0ff; --color-disc-border: #7800cc; --color-note-text: #00224a; --color-note-bg: #ddeeff; --color-note-border: #0044aa; --color-flag-text: #3a2000; --color-flag-bg: #fff4cc; --color-flag-border: #7a5000; --color-matchwhy-text: #1a1400; --color-matchwhy-bg: #fffff0; --color-matchwhy-border: #6a5800; --color-matchwhy-title: #3a2e00; --color-match-problem: #1a1400; --color-match-benefit: #003fa0; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --radius-panel: 8px; --radius-card: 8px; --radius-chip: 4px; --radius-input: 4px; --radius-modal: 8px; --shadow-panel: none; --shadow-modal: 0 0 0 2px #000000; --color-search-border: #000000; --color-search-bg: #ffffff; --color-search-placeholder: #444444; }