/* ═══════════════════════════════════════════════════════════════════════════ Rolling Pin Bakehouse — Brand Tokens Source of truth: "Rolling Pin Bakehouse - Master Font & Color List" (consolidated from the print price sheet + rpbakehouse.com) Hierarchy: BROWN is structure (headers, labels, prices, footer). SAGE is action (buttons, links, active states, unit prices). Load the fonts in each page : https://fonts.googleapis.com/css2?family=Caprasimo&family=Inter:wght@500;600&family=Montserrat:wght@400;500;600;700&display=swap ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Color ──────────────────────────────────────────────────────────────── Print/web hex pairs differ by ~1 digit; treated as one swatch each. */ --rp-brown: #86664C; /* PRIMARY ink — headers, labels, prices, footer */ --rp-brown-line: #86654B; /* dotted rules / borders (same swatch) */ --rp-brown-dk: #6d5340; /* brown hover / pressed (derived) */ --rp-brown-pale: #f0eae3; /* brown tint surface (derived) */ --rp-sage: #8D9D7B; /* ACTION — buttons, links, active, unit prices */ --rp-sage-dk: #76876A; /* sage hover (derived) */ --rp-sage-pale: #EEF1E9; /* sage tint surface (derived) */ --rp-deep-green: #374827; /* deep accent / logo depth — use sparingly */ --rp-dusty-blue: #BACDD1; /* banner fills, callout bands, secondary headings */ --rp-dusty-blue-pale: #e7eef0; /* callout fill tint (derived) */ --rp-dusty-blue-dk: #5f8189; /* readable text/accent on light dusty-blue (derived) */ --rp-pale-bluegray: #C0CDD0; /* decorative script accent */ --rp-charcoal: #231F20; /* body copy */ --rp-gray: #808285; /* muted / secondary text, uppercase labels */ --rp-offwhite: #F5F5F5; /* alternate surface / bands */ --rp-white: #FFFFFF; /* Warm neutral chassis — replaces the cool grays (#e5e7eb / #f9fafb) the original stylesheets were built on, so borders/surfaces sit in the brand's warm family instead of fighting the brown + sage. */ --rp-line: #ddd5c4; /* warm taupe border */ --rp-line-soft: #ede8e0; /* lighter warm rule (table cell dividers) */ --rp-surface: #f6f2ea; /* warm off-white surface / hover fill */ /* ── Order-status colors ────────────────────────────────────────────────── Signal ORDER STATE, but re-tuned into the warm brand family so the pills stop reading as generic Tailwind (pink/mint/indigo). Semantics preserved: new = calm blue, in-progress = active ochre, done = sage, cancelled = brick. */ --rp-status-new-bg: #e3ecee; --rp-status-new-fg: #3f5c63; /* dusty-blue family */ --rp-status-prog-bg: #f3e8d3; --rp-status-prog-fg: #8a5e2b; /* warm ochre */ --rp-status-done-bg: #e6ecdd; --rp-status-done-fg: #4b5a37; /* sage */ --rp-status-cancel-bg: #f1e2dc; --rp-status-cancel-fg: #8a3b2e; /* warm brick */ /* ── Type ───────────────────────────────────────────────────────────────── Caprasimo = display (category headers, order numbers, titles). Montserrat = body, prices, labels. Inter = UI chrome (buttons, form controls, nav) per the web brand. Montserrat Alternates (print product labels) intentionally omitted from the screen system — add --rp-alt if a surface ever needs it. */ --rp-display: 'Caprasimo', Georgia, serif; --rp-body: 'Montserrat', system-ui, -apple-system, "Segoe UI", sans-serif; --rp-ui: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif; /* Numerals: clearer digits (the "4 vs 9" fix) for order numbers, dates, totals. */ --rp-num: 'Plus Jakarta Sans', 'Montserrat', system-ui, sans-serif; /* ── Shape ────────────────────────────────────────────────────────────────*/ --rp-radius: 12px; --rp-radius-sm: 6px; --rp-shadow: 0 1px 3px rgba(35,31,32,.06), 0 6px 20px rgba(35,31,32,.05); } /* ── Shared status-pill component ─────────────────────────────────────────── One definition for all surfaces. Add class `rp-pill` + a state modifier. */ .rp-pill { display: inline-block; padding: 4px 12px; border-radius: 9999px; font-family: var(--rp-ui); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; background: var(--rp-offwhite); color: var(--rp-gray); } .rp-pill.is-new { background: var(--rp-status-new-bg); color: var(--rp-status-new-fg); } .rp-pill.is-progress { background: var(--rp-status-prog-bg); color: var(--rp-status-prog-fg); } .rp-pill.is-done { background: var(--rp-status-done-bg); color: var(--rp-status-done-fg); } .rp-pill.is-cancelled { background: var(--rp-status-cancel-bg); color: var(--rp-status-cancel-fg); }