/* Kmusta brand v2 — cream/espresso palette (DRAFT until Phase 1 founder sign-off) ============================================================================ Source of truth: docs/09-brand-guidelines.md. Values reconciled from Brand Foundry/reference/mockup-tokens-chatgpt.json (ChatGPT's reverse-engineered spec for the 2026-08-26 mobile mockup) against the WCAG AA gate in tools/wcag_gate.py. Four values differ from that spec; every one of them is a contrast failure the gate caught, and each is annotated inline below. TOKENS ARE THE TENANT-THEMING SEAM. Franchisee theming ships by overriding this file per tenant — never by forking components or adding tenant branches in application code (docs/02-the-boundary.md). Keep every brand value here. NOT LINKED BY ANY PAGE YET. Phase 0 is draft-only; the first surface to load this is site-src/cart/order.html at the Phase 1 founder pilot gate. Load order when it does ship: colors.css -> brand-v2.css -> shape.css -> status.css (brand-v2 intentionally overrides the v1 Salu-Salo values in colors.css.) ============================================================================ */ :root { /* ---- Grounds ---------------------------------------------------------- */ --color-cream: #F7F1E7; /* page ground */ --color-cream-card: #FBF8F1; /* card fill */ --color-cream-deep: #F3E8D5; /* secondary card / well */ /* ---- Dark surfaces ---------------------------------------------------- */ --color-espresso: #382A20; /* dark surface, CTA fill, selected state */ --color-espresso-2: #4A382B; /* dark secondary / pressed */ /* ---- Text ------------------------------------------------------------- */ --color-ink: #2E2119; /* primary text */ --color-ink-soft: #736659; /* secondary text. ADJUSTED from spec #75685C: that value is 4.45:1 on --color-cream-deep, just under the 4.5 bar. It passes on page and card; the WELL is what failed. Two hex points, and all three grounds now clear. */ --color-ink-muted: #8A7D70; /* muted text/icons — LARGE TEXT AND UI ONLY. ADJUSTED from spec #9A8E82: 2.85:1, under even the 3.0 non-text bar. Never body copy. */ --color-on-espresso: #FFF8EC; /* text/icons on any dark surface */ /* ---- Lines ------------------------------------------------------------ */ --color-border: #DED3C3; /* DECORATIVE hairline only. 1.32:1 — legal solely because WCAG 1.4.11 exempts lines that carry no meaning. If a border is the only thing telling a user that something is a control, it is NOT this token. */ --color-divider: #E9E0D3; /* decorative divider, same exemption */ --color-border-control: #8A7D70; /* the boundary that IDENTIFIES an input, select, or stepper. 3.56:1, clears 1.4.11. Not in the ChatGPT spec — the spec has one border token and it is not legal for controls. This split is ours. */ /* ---- Accents ---------------------------------------------------------- */ --color-ube: #6B4E9B; /* THE sole surviving UI accent: links, active states, logo steam. Founder decision, and it clears the text bar unchanged at 5.86:1. */ --color-ube-deep: #55407D; /* link hover / pressed */ --color-ube-tint: #EFEAF6; /* active-row / chip wash */ --color-caramel: #8F5A22; /* warm highlight AS TEXT — darkened from the spec value #B87532 (3.32:1, fails 4.5). */ --color-caramel-fill: #B87532; /* the spec value, kept for FILLS and graphics where the 3.0 bar applies (3.32:1). */ --color-caramel-light:#E5C39A; /* soft warm wash */ --color-sage: #575E43; /* quiet success AS TEXT — darkened from the spec value #6E7559 (4.30:1, fails 4.5). */ --color-sage-fill: #6E7559; /* the spec value, for fills/dots (4.30:1). */ /* ---- Retirement remaps ------------------------------------------------ */ /* Pandan and mango leave the UI (packaging and social may still use them — docs/09 Surface Map). These remaps mean a page still referencing a v1 token renders in v2 rather than tearing a hole in the palette. Do not add NEW references to either name. */ --color-mango: var(--color-caramel-fill); --color-mango-deep: var(--color-caramel); --color-pandan: var(--color-sage-fill); --color-pandan-tint: #EDEFE6; /* ---- Semantic aliases (what components should actually reference) ------ */ --surface-page: var(--color-cream); --surface-card: var(--color-cream-card); --surface-well: var(--color-cream-deep); --surface-board: var(--color-espresso); --text-body: var(--color-ink); --text-secondary: var(--color-ink-soft); --text-muted: var(--color-ink-muted); --border-card: var(--color-border); --border-input: var(--color-border-control); --link-color: var(--color-ube); --cta-bg: var(--color-espresso); /* was mango gold in v1 */ --cta-text: var(--color-on-espresso); --cta-bg-pressed: var(--color-espresso-2); --success: var(--color-sage); --focus-ring: var(--color-espresso); } /* --------------------------------------------------------------------------- Dark theme. Roles invert rather than merely darken: the raised surface that was espresso-on-cream becomes cream-on-espresso, so a CTA stays the lightest thing on the screen in both themes. Every pair below clears the same bars — run `python tools/wcag_gate.py` after any change here. --------------------------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-cream: #1C1611; --color-cream-card: #261E17; --color-cream-deep: #332720; --color-espresso: #F2E8DA; --color-espresso-2: #DDD0BE; --color-ink: #F2E8DA; --color-ink-soft: #BCAE9E; --color-ink-muted: #948676; --color-on-espresso: #241C15; --color-border: #453729; --color-divider: #362A21; --color-border-control: #948676; --color-ube: #B49BE0; --color-ube-deep: #CDBAEC; --color-ube-tint: #2E2440; --color-caramel: #E0A868; --color-caramel-fill: #E0A868; --color-caramel-light:#3A2A18; --color-sage: #A3B189; --color-sage-fill: #A3B189; --color-pandan-tint: #232A1E; } } :root[data-theme="dark"] { --color-cream: #1C1611; --color-cream-card: #261E17; --color-cream-deep: #332720; --color-espresso: #F2E8DA; --color-espresso-2: #DDD0BE; --color-ink: #F2E8DA; --color-ink-soft: #BCAE9E; --color-ink-muted: #948676; --color-on-espresso: #241C15; --color-border: #453729; --color-divider: #362A21; --color-border-control: #948676; --color-ube: #B49BE0; --color-ube-deep: #CDBAEC; --color-ube-tint: #2E2440; --color-caramel: #E0A868; --color-caramel-fill: #E0A868; --color-caramel-light:#3A2A18; --color-sage: #A3B189; --color-sage-fill: #A3B189; --color-pandan-tint: #232A1E; }