/* ===================================================================== THEME / BRAND COLORS — the ONLY place colors are defined. To apply the real brand palette (from Romain's Adobe Express menu), change the values below; nothing else needs editing. Also update "theme_color" in manifest.webmanifest and in index.html to match --brand-primary, then bump VERSION in sw.js. Keep text/background pairs at WCAG AA contrast (4.5:1). Current values: sampled from the printed menu (Aug 2026 issue) with /workspace/menu-print/sample_colors.py. Contrast: ink on cream 12.3:1, white on charcoal 11.4:1, red headings on cream 5.7:1, white on red 6.2:1. ===================================================================== */ :root{ /* brand */ --brand-primary:#3A3A3C; /* header, primary buttons, selected chips (logo charcoal "COSMOPOLITAN") */ --brand-accent:#BC2326; /* category labels, step numbers, scaled amounts (menu red headings) */ --brand-accent-soft:#F9E3E1; /* background behind scaled amounts in steps (tint of the menu red) */ --on-primary:#fff; /* text on --brand-primary / --brand-accent */ --on-primary-sub:#CFCEC7; /* secondary text on --brand-primary (menu light grey) */ --page-bg:#FAF6ED; /* page background (menu cream) */ --surface:#fff; /* cards, panels, tables */ --ink:#293133; /* main text (menu body text / frame charcoal) */ --ink-sub:#4A5151; /* secondary text (menu secondary charcoal) */ --line:#e6dfd3; /* borders */ --press:#eef2f7; /* pressed row */ --select-bg:#e7eef8; /* selected ingredient row */ --dot:#cfd6df; /* step-mode dots */ --wake-on:#ffd76a; --wake-off:#8fa3bd; --overlay:rgba(10,20,35,.45); --offline-bg:#333; --tip-bg:#eef4fb; --tip-line:#c6d7ec; /* French tricolour bar under the logo (decoration only: the red is too light for text on cream) */ --flag-blue:#001D9C; --flag-white:#FFFFFF; --flag-red:#EA293F; --logo-dot:#25AAE1; /* the blue dot on the "I" of THINK */ /* status colors (functional: keep their meaning when rebranding) */ --warn-bg:#fff1c2; --warn-line:#d9a400; --warn-ink:#6b4d00; --warn-strong:#8a5a00; /* amber: needs confirmation / UNKNOWN */ --off-bg:#eee; --off-line:#999; --off-ink:#444; /* off menu, "no" */ --adj-bg:#ffe3d6; --adj-line:#c2542d; --adj-ink:#7a2a0e; /* adjust to taste */ --der-bg:#e6eefb; --der-line:#5a7bb5; --der-ink:#1f3a5f; /* derived value */ --ok-bg:#e3f4e6; --ok-line:#3f8f52; --ok-ink:#1d5a2c; /* scaled / done */ --danger-bg:#fde8e6; --danger-line:#b3261e; --danger-ink:#7d140f; /* allergen present, critical point */ --info-bg:#e8f1fb; --info-line:#3d6fa8; --info-ink:#173b63; /* hygiene prompts, new-cook notes */ --black:#000; } /* v10: "presumed, label pending" (Yes*) — amber-red: counts as contains, label still to check */ :root { --pres-bg:#fde3cf; --pres-line:#c2410c; --pres-ink:#7a2a07; --draft-stripe:rgba(217,164,0,.08); } /* ===================================================================== v11: ONE APP, THREE RESTAURANTS — per-restaurant accent colours. The chosen restaurant is set on by app.js; only the accent (category labels, step numbers, scaled amounts, header stripe, picker tile) changes. Status colours above never change per restaurant. French (data-rest="french") keeps the palette above unchanged. ===================================================================== */ :root { --rest-french:#BC2326; --rest-french-soft:#F9E3E1; } /* French = the current menu red (not a placeholder) */ /* ⚠ PLACEHOLDER — Shanghai Table brand colours not received yet. Jade green chosen only to be clearly different from the French red. Replace with the real Shanghai Table colours when they arrive (keep ≥4.5:1 on --page-bg and with white text). Contrast: 6.0:1 on cream, 6.5:1 white on accent, 5.5:1 on its soft tint. */ :root { --rest-shanghai:#0E6B52; --rest-shanghai-soft:#DDF1E8; } /* ⚠ PLACEHOLDER — Mexican Cantina brand colours not received yet (teaser menu was black/orange per Grok's description, not sampled). Magenta chosen only to be distinct from French red, Shanghai jade and the amber warnings. Contrast: 6.3:1 on cream, 6.8:1 white on accent, 5.5:1 on its soft tint. */ :root { --rest-cantina:#A0287A; --rest-cantina-soft:#F8E1EF; } :root[data-rest="shanghai"] { --brand-accent:var(--rest-shanghai); --brand-accent-soft:var(--rest-shanghai-soft); --rest-stripe:var(--rest-shanghai); } :root[data-rest="cantina"] { --brand-accent:var(--rest-cantina); --brand-accent-soft:var(--rest-cantina-soft); --rest-stripe:var(--rest-cantina); }