/* RestaurantOS design tokens — 07-website.md §4. * * Components must never hardcode a pixel value. They consume the semantic * tokens below; each channel sets a density profile on that redefines * them: * * website (default) * admin * kitchen (Phase 2) * kiosk (Phase 4) * * The 8px grid is constant everywhere - it is the rhythm. What changes is the * multiplier applied to it, the type scale, and the minimum hit area. * * --tap-min is a FLOOR of 44px. Profiles raise it; none may lower it. */ :root { /* ---- Palette (density independent) ---- */ --colour-bg: #ffffff; --colour-surface: #f7f7f8; --colour-border: #e3e3e6; --colour-text: #1a1a1c; --colour-text-muted: #5f5f6a; --colour-primary: #3538cd; /* a restaurant's branding overrides this */ --colour-primary-text: #ffffff; --colour-success: #027a48; --colour-warning: #b54708; --colour-danger: #b42318; /* ---- Where an order is (D-053) ---- * One colour per fulfilment stage, used by the kitchen board AND by the * counter's order list, so the two screens cannot drift apart. Each pairs a * background with the text colour that goes ON it - a background with no * colour beside it is how the owner's iPhone came to show an empty button. * * Contrast against their own text is 4.5:1 or better, and colour is never * the only cue: every badge and button also says its stage in words. */ --stage-new-bg: #ffffff; --stage-new-text: #1a1a1c; --stage-start-bg: #facc15; /* making it - yellow */ --stage-start-text: #1a1a1c; --stage-ready-bg: #6941c6; /* ready - purple */ --stage-ready-text: #ffffff; --stage-done-bg: #027a48; /* handed over - green */ --stage-done-text: #ffffff; /* ---- Typography ---- */ --font-stack: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-base: 16px; --font-sm: 14px; --font-lg: 20px; --font-display: 28px; --line-height: 1.5; /* ---- Spacing: 8px grid, scaled per density ---- */ --space-unit: 8px; --space-scale: 1; --space-xs: calc(var(--space-unit) * 0.5 * var(--space-scale)); --space-sm: calc(var(--space-unit) * 1 * var(--space-scale)); --space-md: calc(var(--space-unit) * 2 * var(--space-scale)); --space-lg: calc(var(--space-unit) * 3 * var(--space-scale)); --space-xl: calc(var(--space-unit) * 5 * var(--space-scale)); /* ---- Controls ---- */ --control-min-height: 44px; --tap-min: 44px; --radius: 8px; --icon-size: 20px; --content-max-width: 640px; } /* Admin: same hit areas as the website, wider content, tighter display type. * Responsive breakpoints live INSIDE this profile - admin is used both at a * desk and on a phone behind the counter. */ :root[data-density="comfortable"] { --font-display: 24px; --content-max-width: 1280px; } /* Kitchen: read at distance, in a bright and busy room. */ :root[data-density="glance"] { --font-base: 20px; --font-sm: 17px; --font-lg: 26px; --font-display: 40px; --space-scale: 1.25; --control-min-height: 56px; --tap-min: 56px; --icon-size: 28px; --content-max-width: none; } /* Kiosk: standing, at arm's length, tapped with a thumb. */ :root[data-density="touch"] { --font-base: 22px; --font-sm: 18px; --font-lg: 30px; --font-display: 44px; --space-scale: 1.5; --control-min-height: 72px; --tap-min: 72px; --radius: 12px; --icon-size: 32px; --content-max-width: 960px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }