/* ============================================================ Biomate — design tokens Read off the team's Figma (NNSWKzLDoVGtwtM7D0o25u), with one correction: the terracotta fails WCAG AA for normal text. white on #D2552A = 4.14:1 (needs 4.5) #D2552A on cream = 3.82:1 So there are THREE oranges doing three jobs, not one doing all of them badly: --brand #D2552A icons, borders, active nav, fills (3:1 rule) --brand-ink #C14E27 button fills carrying white text (4.79:1) --brand-text #A32E2E terracotta-coloured TEXT on light (7.03:1) The deep red was already in the palette as the logo ring, so the brand contained its own accessible text tone all along. ⚠️ Every token below is audited for DUAL USE. Peak & Pan shipped a token that was both a background and a text colour; in dark mode the text inverted to the same colour as its own surface and vanished. Anything named --on-* is a constant that never moves between themes. ============================================================ */ :root { /* ---- brand ---- */ --brand: #D2552A; --brand-ink: #C14E27; --brand-text: #A32E2E; --brand-soft: #E0673A; --amber: #F0A32A; --forest: #2E6B2E; /* ---- surfaces ---- */ --bg: #FFFFFF; --surface: #FFFFFF; --cream: #FAF5EE; --peach-0: #FDEDE6; /* card gradient start */ --peach-1: #FFFFFF; /* card gradient end */ --hairline: rgba(23, 23, 23, 0.10); /* strengthened once real photos landed — a bright rock face under white text was genuinely hard to read at .78/.45 */ --scrim: linear-gradient(to top, rgba(0,0,0,.90) 0%, rgba(0,0,0,.68) 34%, rgba(0,0,0,.28) 62%, transparent 88%); /* ---- ink ---- */ --ink: #171717; --ink-soft: #5A5652; /* ⚠️ This is real prose — .tiny, message senders, system lines, form labels, grid hours — not decoration. At #A39E99 it measured 2.66:1 on the page and 2.45:1 on cream, where 4.5 is the bar; it was the single biggest source of failing text in the app, in the same way --on-brand was for buttons. Darkened to clear AA on every surface it actually sits on: 4.63:1 on --bg, 4.54:1 on --cream. */ --ink-faint: #6E6862; /* constants — identical in every theme, never inverted */ --on-brand: #FFFFFF; /* text sitting ON a brand fill */ /* the wash behind a destructive control — red enough to read as a warning at a glance, light enough that --brand-text stays at 6.0:1 on it and it never competes with a primary button */ --danger-wash: #FBE9E9; /* the sentence being read aloud. Warm rather than the usual yellow highlighter: it has to sit under body text for a second or two without the page looking marked up. --ink measures 14.19:1 on it. */ --read-wash: #F9E0D2; --on-photo: #FFFFFF; /* text sitting ON a photo scrim */ /* ---- shape ---- */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* ---- type ---- Display is a heavy brush-script italic. Fraunces at high optical size + heavy weight is the closest webfont to the Figma's face and it degrades to a real serif rather than to Comic Sans. */ --font-display: "Fraunces", "Georgia", serif; --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* rem-based so the OS font-size setting actually works */ --t-xs: 0.75rem; --t-sm: 0.875rem; --t-md: 1rem; --t-lg: 1.125rem; --t-xl: 1.375rem; --t-2xl: 1.75rem; /* ---- depth ---- */ --lift-1: 0 1px 2px rgba(23,23,23,.05), 0 2px 8px rgba(23,23,23,.05); --lift-2: 0 2px 6px rgba(23,23,23,.06), 0 10px 24px rgba(23,23,23,.08); --lift-3: 0 6px 16px rgba(23,23,23,.10), 0 20px 44px rgba(23,23,23,.14); /* ---- motion ---- Everything here is one-shot and user-triggered. Nothing loops. See docs/ACCESSIBILITY.md and the Motion Must Be User Driven rule. */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --fast: 140ms; --med: 260ms; /* ---- layout ---- */ --pad: 20px; --nav-h: 64px; --tap: 44px; /* minimum touch target */ --safe-b: env(safe-area-inset-bottom, 0px); } /* ============================================================ Dark theme. Only tokens are redefined — no component rule below this line ever needs to know which theme is active. Guarded with :not([data-theme="light"]) so an explicit light choice still wins over the OS preference. ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #14100E; --surface: #1E1815; --cream: #241D19; --peach-0: #2A201B; --peach-1: #1E1815; --hairline: rgba(255, 245, 238, 0.12); --ink: #F6EFE8; --ink-soft: #C4B7AC; --ink-faint: #8A7C72; /* lifted so they stay legible on a dark ground */ --brand: #F0723E; --brand-ink: #E0673A; --brand-text: #F29068; --amber: #F6B449; --forest: #6FAE5C; /* ⚠️ White does NOT go on the dark brand fill. #E0673A is lifted so it reads on a dark ground, and that lift costs contrast the other way: white on it is 3.40:1, under the 4.5 AA needs. The dark ground itself gives 4.88:1, so text on a brand fill flips to it. This is not one button — --on-brand carries every primary button, the swipe deck's yes, the active nav item, tiles and checkboxes, so getting it wrong here failed all of them at once in dark mode. */ --on-brand: #241D19; --danger-wash: #3A211C; /* 6.34:1 under --brand-text */ --read-wash: #4A362B; /* 9.94:1 under --ink */ --lift-1: 0 1px 2px rgba(0,0,0,.4); --lift-2: 0 2px 6px rgba(0,0,0,.45), 0 10px 24px rgba(0,0,0,.35); --lift-3: 0 6px 16px rgba(0,0,0,.5), 0 20px 44px rgba(0,0,0,.45); } } :root[data-theme="dark"] { --bg: #14100E; --surface: #1E1815; --cream: #241D19; --peach-0: #2A201B; --peach-1: #1E1815; --hairline: rgba(255, 245, 238, 0.12); --ink: #F6EFE8; --ink-soft: #C4B7AC; --ink-faint: #8A7C72; --brand: #F0723E; --brand-ink: #E0673A; --brand-text: #F29068; --amber: #F6B449; --forest: #6FAE5C; /* see the note in the prefers-color-scheme block above */ --on-brand: #241D19; --danger-wash: #3A211C; --read-wash: #4A362B; --lift-1: 0 1px 2px rgba(0,0,0,.4); --lift-2: 0 2px 6px rgba(0,0,0,.45), 0 10px 24px rgba(0,0,0,.35); --lift-3: 0 6px 16px rgba(0,0,0,.5), 0 20px 44px rgba(0,0,0,.45); }