/* ============================================================================ Tafel · tokens.css The single source of truth. Nothing below this file hardcodes a colour, a size, a duration or a curve. Ratios in the comments are measured by scripts/contrast.py — re-run it after any colour change. Surfaces: :root the light, cream "menu board" surface (customer app, web, admin) [data-surface="kitchen"] the dark surface for the restaurant iPad app — read at arm's length, in a bright kitchen ========================================================================= */ :root { /* --- ground & surfaces ------------------------------------------------ */ --ground: #FBF7F0; /* warm cream. Chroma lives here, NOT in the primary text */ --surface: #FFFFFF; /* cards, sheets */ --surface-2: #F6F1E8; /* sunk panels, inputs */ --surface-3: #EFE8DC; /* hover on sunk */ --surface-sunk: #F3EEE5; /* page sections behind cards */ /* --- ink ---------------------------------------------------------------- */ --ink: #1C1A17; /* 16.26:1 on ground */ --ink-2: #4A453F; /* 8.88:1 */ --ink-3: #6B655C; /* 5.40:1 — the text floor */ --ink-4: #A39C92; /* 2.54:1 — icons and rules only, never text */ --ink-inverse: #FBF7F0; /* --- lines -------------------------------------------------------------- */ --line-faint: #F0EAE0; --line: #E8E1D6; --line-strong: #D2C9BA; --line-control: #A8A093; /* input borders: 2.4:1, boosted by fill */ /* --- brand: paprika ----------------------------------------------------- */ --paprika: #D23A1E; /* white on it 4.81:1 · as text on ground 4.51:1 */ --paprika-press: #B9321A; --paprika-ink: #A82C15; /* text on ground 6.48:1 · on soft 5.87:1 */ --paprika-soft: #FDE8E3; --paprika-line: #F4B9AC; --on-paprika: #FFFFFF; /* --- basil (open · delivered · success) --------------------------------- */ --basil: #2F6B3A; /* white on it 6.39:1 · on ground 5.99:1 */ --basil-ink: #245A2F; --basil-soft: #E6F3E8; --basil-line: #B5D8BC; /* --- saffron (ratings · promos · warnings) — FILL ONLY, never text ------ */ --saffron: #F2B234; /* ink on it 9.25:1 */ --saffron-ink: #7E5200; /* text on ground 6.36:1 · on soft 6.15:1 */ --saffron-soft: #FFF3D6; --saffron-line: #F4D58A; /* --- plum (system · admin · out for delivery) --------------------------- */ --plum: #5B2A86; /* 9.27:1 */ --plum-ink: #4A2070; --plum-soft: #EFE7F7; --plum-line: #CDB8E6; /* --- info / danger ------------------------------------------------------ */ --info: #2B5FA8; /* 5.95:1 */ --info-ink: #234D89; --info-soft: #E5EDF9; --info-line: #B3C7E8; --danger: #B3261E; /* 6.12:1 */ --danger-ink: #9A1F18; --danger-soft: #FBE7E5; --danger-line: #EFB3AE; /* --- order status ramp (icon + text + colour, always) ------------------- */ --st-new: var(--paprika); --st-new-ink: var(--paprika-ink); --st-new-soft: var(--paprika-soft); --st-new-line: var(--paprika-line); --st-accepted: var(--info); --st-accepted-ink: var(--info-ink); --st-accepted-soft: var(--info-soft); --st-accepted-line: var(--info-line); --st-preparing: var(--saffron); --st-preparing-ink: var(--saffron-ink); --st-preparing-soft: var(--saffron-soft); --st-preparing-line: var(--saffron-line); --st-ready: var(--basil); --st-ready-ink: var(--basil-ink); --st-ready-soft: var(--basil-soft); --st-ready-line: var(--basil-line); --st-out: var(--plum); --st-out-ink: var(--plum-ink); --st-out-soft: var(--plum-soft); --st-out-line: var(--plum-line); --st-done: var(--ink-3); --st-done-ink: var(--ink-2); --st-done-soft: var(--surface-2); --st-done-line: var(--line-strong); --st-cancelled: var(--danger); --st-cancelled-ink: var(--danger-ink); --st-cancelled-soft: var(--danger-soft); --st-cancelled-line: var(--danger-line); /* --- chrome (prototype bar, tour box) — fixed, does not flip ------------ */ --chrome: #1C1A17; --chrome-2: #2A2722; --chrome-ink: #FBF7F0; --chrome-ink-2: #B9B2A6; --chrome-accent: #F2B234; /* --- dish tints (food tiles; ink glyph on each ≥ 7:1) ------------------- */ --tint-tomato: #F6D3CB; --tint-butter: #F9E3B4; --tint-basil: #D6E7D3; --tint-sky: #D3E1F2; --tint-lilac: #E4D8F0; --tint-sand: #EADFCB; --tint-mint: #D2ECE4; --tint-rose: #F4D6E3; /* --- typography --------------------------------------------------------- */ --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino', Georgia, serif; --font-ui: 'Figtree', 'Avenir Next', 'Segoe UI', system-ui, sans-serif; --font-mono: 'DM Mono', 'SF Mono', Menlo, Consolas, monospace; --t-11: 0.6875rem; --t-12: 0.75rem; --t-13: 0.8125rem; --t-14: 0.875rem; --t-15: 0.9375rem; --t-16: 1rem; --t-18: 1.125rem; --t-20: 1.25rem; --t-22: 1.375rem; --t-24: 1.5rem; --t-28: 1.75rem; --t-32: 2rem; --t-36: 2.25rem; --t-44: 2.75rem; --t-56: 3.5rem; /* fluid display sizes, brand surface only */ --d-sm: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); --d-md: clamp(2.25rem, 1.4rem + 3.2vw, 3.5rem); --d-lg: clamp(2.75rem, 1.6rem + 4.6vw, 4.75rem); --d-xl: clamp(3.25rem, 1.8rem + 6vw, 5.75rem); --lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.55; --lh-loose: 1.7; --track-caps: 0.08em; /* --- space (4px base) --------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; /* --- radius ------------------------------------------------------------- */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-full: 999px; /* --- elevation (warm-tinted) -------------------------------------------- */ --e-1: 0 1px 2px rgba(28,26,23,.06), 0 1px 1px rgba(28,26,23,.04); --e-2: 0 4px 14px rgba(28,26,23,.08), 0 1px 3px rgba(28,26,23,.06); --e-3: 0 18px 40px rgba(28,26,23,.16), 0 4px 10px rgba(28,26,23,.08); --e-phone: 0 40px 80px rgba(28,26,23,.28), 0 0 0 1px rgba(28,26,23,.5); /* --- motion ------------------------------------------------------------- */ --d-press: 90ms; --d-micro: 160ms; --d-sheet: 240ms; --d-modal: 280ms; --d-toast: 320ms; --ease-out: cubic-bezier(.2,.8,.2,1); --ease-in-out: cubic-bezier(.65,0,.35,1); --ease-spring: cubic-bezier(.34,1.4,.64,1); /* --- z ------------------------------------------------------------------ */ --z-sticky: 10; --z-nav: 20; --z-layer: 30; --z-pocbar: 40; --z-toast: 50; /* --- layout ------------------------------------------------------------- */ --control-h: 44px; /* every tappable control ≥ 44px */ --control-h-sm: 36px; --control-h-lg: 52px; --row-h: 48px; --gutter: clamp(16px, 4vw, 32px); --card-pad: var(--s-5); --sidebar-w: 248px; --topbar-h: 60px; --pocbar-h: 44px; --phone-w: 390px; --phone-h: 844px; --tablet-w: 1180px; --tablet-h: 820px; --focus-ring: 0 0 0 3px var(--ground), 0 0 0 5px var(--paprika); --app-gutter: var(--s-4); /* the phone screen's single horizontal gutter; .phone re-declares it */ } /* --------------------------------------------------------------------------- The customer app surface. White, the way a consumer food app reads: the photography supplies the warmth, so the ground stays out of its way and the cards separate by shadow and hairline rather than by tint. Scoped to the phone so the brand site and the console keep their cream register. ------------------------------------------------------------------------ */ .phone { --ground: #FFFFFF; --surface: #FFFFFF; --surface-2: #F4F4F5; /* inputs, sunk rows */ --surface-3: #E9E9EB; /* hover on sunk */ --surface-sunk: #F8F8F9; /* section bands */ --line-faint: #F1F1F2; --line: #E4E4E7; --line-strong: #D2D2D6; --line-control: #A1A1A6; /* Warm neutrals for text: still the brand ink, just no cream cast under it. */ --ink: #18181B; /* 17.85:1 on white */ --ink-2: #46464C; /* 9.02:1 */ --ink-3: #66666E; /* 5.55:1 — the text floor */ --ink-4: #A1A1A8; /* 2.53:1 — icons and rules only */ --e-1: 0 1px 2px rgba(24,24,27,.06), 0 1px 3px rgba(24,24,27,.05); --e-2: 0 4px 14px rgba(24,24,27,.09), 0 1px 3px rgba(24,24,27,.06); --e-3: 0 18px 40px rgba(24,24,27,.18), 0 4px 10px rgba(24,24,27,.08); } /* --------------------------------------------------------------------------- Kitchen surface: the restaurant iPad. Dark so a lit kitchen does not wash it out, with brighter status colours because the eye is a metre away. ------------------------------------------------------------------------ */ [data-surface="kitchen"] { --ground: #17191D; --surface: #22252B; --surface-2: #2C3037; --surface-3: #353A42; --surface-sunk: #1D2025; --ink: #F4F1EA; /* 13.61:1 on surface */ --ink-2: #C9C4BB; /* 8.85:1 */ --ink-3: #A39C92; /* 5.65:1 — text floor on surface */ --ink-4: #6E6A63; --ink-inverse: #1C1A17; --line-faint: #2A2E35; --line: #353A42; --line-strong: #464C56; --line-control: #5A616C; --paprika: #FF6A4D; /* 5.43:1 on surface as text */ --paprika-press: #FF8266; --paprika-ink: #FF8A70; --paprika-soft: #3B2521; --paprika-line: #6B3A30; --on-paprika: #1C1A17; --basil: #5CC27A; /* 6.91:1 */ --basil-ink: #7ED597; --basil-soft: #1F3327; --basil-line: #2F5A3C; --saffron: #F2B234; --saffron-ink: #F7C65C; --saffron-soft: #3A3020; --saffron-line: #6A5528; --plum: #C79BFF; --plum-ink: #D4B3FF; --plum-soft: #2E2540; --plum-line: #4E3F6B; --info: #7FB3FF; --info-ink: #9CC4FF; --info-soft: #202B3B; --info-line: #35507A; --danger: #FF7A70; --danger-ink: #FF9C94; --danger-soft: #3B2222; --danger-line: #6B3838; --st-done: var(--ink-3); --st-done-ink: var(--ink-2); --st-done-soft: var(--surface-2); --st-done-line: var(--line-strong); --e-1: 0 1px 2px rgba(0,0,0,.3); --e-2: 0 4px 14px rgba(0,0,0,.35); --e-3: 0 18px 40px rgba(0,0,0,.5); --focus-ring: 0 0 0 3px var(--surface), 0 0 0 5px var(--saffron); }