/* Design tokens — single source of truth. All other CSS must reference these variables, no hardcoded colors. Palette (sm-v44 — Graphite + Teal, Anton's Palette I): - Accent: Teal #1D9E75 for primary actions, focus rings, sidebar stripe. Cool, calm, NOT the same hue as any purpose color. - Purpose colors live in their OWN stable group below (--purpose- kitchen / -bar / -staff) so changing the accent doesn't drag Kitchen along with it. - Backgrounds: cool neutral greys (warm cream era is over — graphite reads as "professional / kitchen-grade"). - Sidebar: graphite #2C2C2A with cool-grey text + 3px teal stripe. Pre-v44 Terracotta era left an aliased --terracotta variable in this file. It now POINTS TO --accent (so the 35-ish call sites that reference --terracotta keep working) AND a couple of legacy "kitchen uses terracotta" wires were swapped to --purpose-kitchen in components.css. No literal #C4623A or #A85228 anywhere in the tree. */ :root { /* Surfaces — cool neutral greys */ --bg: #FAFAFA; /* cool off-white page bg */ --surface: #FFFFFF; /* card / dialog */ --surface-2: #F1F1F0; /* cool light grey — secondary */ --surface-3: #E7E7E5; /* deeper cool grey */ --warm-cream: #F1F1F0; /* legacy alias → now cool grey */ --warm-white: #FAFAFA; /* legacy alias */ /* Borders */ --border: #DCDCDA; /* neutral grey */ --border-2: #C2C2BF; /* a notch darker */ /* Text — neutral graphite */ --text: #2C2C2A; /* primary graphite */ --text-2: #5F5E5A; /* secondary */ --text-3: #9A9A95; /* faint — captions */ --text-inv: #FFFFFF; /* on dark / on accent */ --dark-text: #2C2C2A; /* alias */ --medium-text: #5F5E5A; /* alias */ /* Brand / accent — Teal. Anton's Palette I spec'd #1D9E75 but white text on that hue gave 3.39:1, below WCAG AA 4.5. Darkened the base just enough to pass (4.9:1) while keeping the same teal feel. --accent-hover stays at the spec'd #0F6E56 — already passes (6.2:1). */ --accent: #0F8060; --accent-hover: #0F6E56; --accent-light: #E1F5EE; --accent-ring: rgba(15,128,96,.22); /* Semantic */ --success: #6B7C5C; /* olive — "all OK" */ --success-light: #EDF2E9; --success-dark: #525F46; --danger: #B94040; /* warm error red */ --danger-light: #FBE9E9; --danger-dark: #8E3232; --warning: #C97C2A; /* amber — only for "warehouse short" */ --warning-light: #FAEEDD; --warning-dark: #8A521A; /* --terracotta* — legacy aliases now point at --accent. Components still reference these names in ~35 places (cart badge, card-counter, ring colors); pointing both at --accent keeps a one-token theme switch real. Anything that needed terracotta SPECIFICALLY for the Kitchen purpose was moved off this alias in components.css and now reads from --purpose-kitchen. */ --terracotta: var(--accent); --terracotta-hover: var(--accent-hover); --terracotta-light: var(--accent-light); /* Olive aliases. */ --olive: #6B7C5C; --olive-light: #EDF2E9; /* ── PURPOSE COLOURS — stable across themes ──────────────────── Anton's invariant: Kitchen / Bar / Staff Meal must stay distinguishable from each other AND from the brand accent. If we let Kitchen ride on --accent, a teal-themed app would paint Kitchen teal and Bar (also bluish) would smear into it. These purpose tokens are decoupled — change them only when the *purpose taxonomy* changes, not when the brand theme does. Kitchen = warm amber (was terracotta vibe), Bar = cool sea blue, Staff = olive. */ /* Kitchen — darkened from the original #BA7517 (3.72:1 white text) to #A36513 (4.8:1) so the stepper fill and cart badge pass full WCAG AA with white text. */ --purpose-kitchen: #A36513; --purpose-kitchen-hover: #8B5610; --purpose-kitchen-light: #FAEEDA; --purpose-bar: #2C5A7E; --purpose-bar-hover: #1F4361; --purpose-bar-light: #DEE9F2; --purpose-staff: #4A5F3B; --purpose-staff-hover: #344429; --purpose-staff-light: #E4EBDA; /* Sidebar (graphite) */ --sidebar-bg: #2C2C2A; --sidebar-bg-2: #36363A; --sidebar-text: #BFBFBA; /* cool grey on graphite */ --sidebar-text-2: #8B8A86; --sidebar-active: var(--accent); /* 3px teal stripe */ --sidebar-hover: rgba(255,255,255,.06); /* Radii */ --radius-sm: 6px; --radius: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* Shadows — softer/warmer than the cold-blue era */ --shadow-sm: 0 1px 2px rgba(0,0,0,.06); --shadow: 0 1px 4px rgba(0,0,0,.08); --shadow-md: 0 2px 6px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04); --shadow-lg: 0 8px 18px -4px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.05); --shadow-xl: 0 18px 24px -6px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.05); --shadow-inner: inset 0 2px 4px rgba(0,0,0,.05); /* Layout dimensions */ --sidebar-w: 220px; --sidebar-w-mini: 64px; --header-h: 60px; --catbar-w: 220px; --content-max: 1400px; --drawer-w: 400px; /* Spacing scale */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* Typography — Inter for Latin, Cairo for Arabic (loaded via Google Fonts in every HTML head). System-ui fallback so the app still works offline / behind a corporate proxy. */ --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --font-ar: 'Cairo', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji"; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px; /* Transitions */ --t-fast: .12s ease; --t: .15s ease; --t-slow: .25s ease; /* Z-index */ --z-sidebar: 60; --z-topbar: 55; --z-drawer: 80; --z-modal: 90; --z-toast: 100; } /* Arabic — swap base font family to Cairo with same fallbacks. */ html[dir="rtl"] { --font: var(--font-ar); } /* Tablet — sidebar collapses to icons */ @media (max-width: 1023px) { :root { --sidebar-w: var(--sidebar-w-mini); } }