/* --------------------------------------------------------------------------- Sorrelmark — tokens.css — THE SINGLE SOURCE for the app's visual language. --------------------------------------------------------------------------- The Owner LOCKED the visual identity 2026-10-19 (register §8 row 9): "Everything public-facing or Clover-facing from here on gets this design language where appropriate." This file is Clover POS/orders/40 §Stage 1. The palette below is copied from `Clover POS/brand/DESIGN.md` (the locked token spec, `npx @google/design.md lint` → 0 errors / 0 warnings) and the measured ancestry is `Clover POS/brand/README.md` (the hero green is the mean of real *Rumex acetosa* photographs, #59732b / #5d7331, agreeing to two points). NOTHING here is invented: every brand value is the locked one. THIS IS THE ONLY FILE IN THE APP THAT MAY CONTAIN A RAW HEX. Every other stylesheet and script names a token. Grep (quoted in the record): grep -rn '#[0-9a-fA-F]\{3,8\}' src/app --include='*.html' --include='*.js' The DERIVED values are written out as literals rather than computed with `color-mix()` at runtime, so the file is deterministic and inspectable; each one carries its derivation and its MEASURED WCAG ratio (4.5:1 is the AA floor for normal text, 3:1 for large). Re-derive them with `python3 tools/token_contrast.py`. --------------------------------------------------------------------------- */ :root{ /* ---- the locked palette (brand/DESIGN.md, verbatim) --------------------- */ --ink:#13240A; /* near-black green — never neutral black */ --green:#59732B; /* the hero, measured from sorrel photographs */ --green-700:#3E5220; /* pressed states; the button ground */ --green-900:#22350F; /* the icon field — the only 100% dark-green surface*/ --sour:#CEE36D; /* sun-on-the-leaf: one accent per screen at most */ --ocrea:#9A4A1C; /* the one warm mark: the collar, an alert */ --ocrea-900:#5E2F14; /* its deep twin */ --ocrea-bright:#DB8A4A; /* the collar's on-dark twin (4.89:1 on green-900) */ --paper:#F7F4EC; /* card stock — narrative sits here */ --card:#FFFFFF; /* white — tables sit here */ --rule:#DAD7CA; /* the ledger hairline */ /* ---- derived: grounds and their text, each measured ------------------- */ --bg:var(--paper); --line:var(--rule); --mut:#5C6752; /* ink 68% + paper — the secondary text token. MEASURED against every ground it lands on: paper 5.43, card 5.97, --soft 5.14, --accent-soft 4.95, hover 5.62, --chip 4.85 (the worst, and the number that picked this value: 65% mixed to 4.42 on the chip ground, under the 4.5:1 AA floor, so the TOKEN changed, not the check). The value it replaces, #64748b on #f6f8fb, measured 4.47:1 — under the floor. */ --soft:#F0EEE5; /* ink 3% + paper — table-head and card-head ground */ --hover:#F8F8F8; /* ink 3% + card — row hover */ --chip:#E9E8DE; /* ink 6% + paper — the neutral chip ground */ --mark-2:#C2C6BF; /* ink 26% + card — the second DATA mark (no text) */ /* ---- semantic states, expressed in this palette's terms ---------------- The palette carries ONE warm family and no red, so the states keep their meaning and the TREATMENT carries the difference (the order's own words: "danger/warn keep their meaning, expressed in the new palette's terms"). */ --accent:var(--green-700); /* paper on it 7.85:1 */ --accent-soft:#E8EBE1; /* green 14% + card — ink 13.55:1 on it */ --on-accent:var(--paper); --warn:var(--ocrea); /* 5.77:1 on --warn-soft */ --warn-soft:#F4F9DF; /* sour 22% + card — 5.77:1 under --ocrea */ --danger:var(--ocrea-900); /* 9.60:1 on --danger-soft */ --danger-line:var(--ocrea); --danger-soft:#F5EDE8; /* ocrea 10% + card */ --info:var(--green-900); /* 10.93:1 on --info-soft */ --info-soft:#EAEADD; /* green 8% + paper */ --up:var(--green-700); /* 7.85:1 on paper */ --down:var(--ocrea); /* 5.67:1 on paper */ --flat:var(--mut); --nodata:var(--ocrea); /* ---- type roles (DESIGN.md: Fraunces display, Inter every figure) ------- FONT STRATEGY — the SYSTEM STACK, not a CDN and not committed binaries. The order allows either; this is the "why" it asks for: a POS device on a bad network must render rather than wait, the repo ships no font binaries today (so self-hosting means fetching ~0.5 MB of woff2 from a third party into the build), and an @font-face we cannot verify offline is a render risk the language does not require. Both faces are named FIRST, so a device that has them uses them; anything else falls to Georgia / the system sans. No CDN dependency exists anywhere in this file. */ --font-display:"Fraunces",Georgia,ui-serif,serif; --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --figure-feature:"tnum" 1; /* every figure is Inter, tabular */ /* ---- radii (DESIGN.md: controls 8 · cards 14–16 · icon field 54) -------- NEVER A PILL — pill-roundness is Clover's ("Why it cannot be mistaken for Clover", brand/README.md). The four 999px chips this replaces are named in the record. */ --r-sm:8px; --r-md:14px; --r-lg:16px; --r-icon:54px; --label-tracking:.15em; /* labels: Inter, uppercase, .15em, .72rem */ --label-size:.72rem; /* ---- the cursor pair (brand/README.md — the guardrail CSS is the spec) -- */ --cursor-arrow:image-set(url("/cursors/cursor-arrow@2x.png") 2x,url("/cursors/cursor-arrow.png") 1x) 2 2,auto; --cursor-leaf:image-set(url("/cursors/cursor-leaf@2x.png") 2x,url("/cursors/cursor-leaf.png") 1x) 16 16,auto; } /* The pointer is the brand's; the HAND and the I-BEAM are not ours to take. "Recognition beats branding at the point of interaction" (brand/README.md). */ body{cursor:var(--cursor-arrow)} .brand-surface{cursor:var(--cursor-leaf)} /* decorative only */ a,button,[role="button"],summary{cursor:pointer} input,textarea,select,[contenteditable]{cursor:text} @media (pointer:coarse){body,.brand-surface{cursor:auto}} /* never on touch */ @media (prefers-reduced-motion:reduce){/* nothing to disable: no animated cursor exists, by policy */}