/* Scissors & Scotch Bar Management System Design tokens: v0.2, 2026-08-19 These are CSS custom properties only. No resets, no component rules. TWO LAYERS, LOADED TOGETHER ---------------------------------------------------------------- 1. BASE TOKENS (this file). Spacing, type, radii, elevation, motion, touch targets, z-index, and the FIXED semantic state colors (Prepared, Not Prepared, blocked, out of stock). These never change per location. They are what makes the product feel and operate the same everywhere, no matter which color scheme a location has chosen. 2. THEME LAYER (design/themes/*.css, one file per curated scheme, load exactly one). Surface, text, and accent colors only. A theme is a single self-contained block of custom-property overrides scoped to `[data-theme=""]`. Nothing in a theme file touches spacing, radii, type, motion, touch targets, or the semantic state colors, with two narrow, named exceptions, both authorized by the product owner's 2026-08-19 amendment to the theming requirement and both documented where they occur: - themes/colorblind.css also overrides the semantic state colors themselves (blue/orange in place of green/red), because the PRD carve-out for accessibility schemes says so explicitly. - themes/high-contrast.css also overrides the three elevation shadow tokens to `none`, relying on a black hairline border instead, because a soft shadow does not survive a cheap glossy screen at a bad angle. See design/README.md for the full list of curated schemes, the contract a custom scheme must follow, and how a location's choice is applied at runtime. Import order: A page that loads tokens.css alone has spacing, type, and the semantic state colors, but no --color-bg, --color-surface, or --color-accent* until a theme file is also loaded. That is intentional: a screen with no theme applied should look visibly unstyled, not silently fall back to a hidden default. Read hex values here or in a theme file, never out of component CSS. */ :root { /* ============================================================ COLOR: fixed semantic state ============================================================ Per product requirement "Per-location visual theming" (docs/product-requirements.md, added 2026-08-19, amended 2026-08-19): the semantic state colors for Prepared, Not Prepared, and blocked are fixed product-wide so operational readability never varies by location. Danger (out of stock / 86'd) and info (documentation callouts) are held fixed for the same reason: they carry meaning a bartender must read correctly regardless of which color scheme a location picked. The values below are the DEFAULT semantic palette and apply to every curated and custom theme except one: themes/colorblind.css, which the amended PRD explicitly carves out to substitute a blue/orange safe palette in its own file, "because accessibility outranks uniformity." That is the only theme permitted to touch these tokens. See design/README.md for that substitution and the simulated colorblindness distances it was checked against. These colors are always used as a self-contained pair: a "subtle" background with its matching "strong" text/icon color and "subtle-border" edge, e.g. a Prepared chip is always --color-success-subtle behind --color-success-strong text. Built this way, the pairing carries its own verified contrast (see design/README.md for the checked ratios) no matter what surface color the active theme puts behind it. Never pair a semantic color with a component's own surface or text tokens. */ --color-success: #2f6f4e; --color-success-strong: #234f38; --color-success-subtle: #e3f1e8; --color-success-subtle-border: #bfe0cc; --color-warning: #b5651d; --color-warning-strong: #8f4f16; --color-warning-subtle: #fbead9; --color-warning-subtle-border: #edc79a; --color-danger: #b3261e; --color-danger-strong: #8c1d17; --color-danger-subtle: #fbe7e5; --color-danger-subtle-border: #eab8b3; --color-info: #2a5c8a; --color-info-subtle: #e5eff7; --color-info-subtle-border: #b9d2e6; /* Modal/sheet backdrop. A neutral, mostly-opaque dark overlay dims whatever is beneath it in every theme, light or dark, so it stays fixed rather than themed. */ --color-scrim: rgba(28, 26, 22, 0.48); /* ============================================================ TYPE SCALE Base is 17px, not 16, because this reads on a tablet at arm's length under bar lighting, not on a monitor at reading distance. ============================================================ */ --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-size-xs: 0.8125rem; /* 13px: timestamps, helper captions */ --font-size-sm: 0.9375rem; /* 15px: secondary labels */ --font-size-base: 1.0625rem; /* 17px: body, menu tile labels */ --font-size-md: 1.1875rem; /* 19px: ticket line items */ --font-size-lg: 1.4375rem; /* 23px: section headings */ --font-size-xl: 1.75rem; /* 28px: screen titles */ --font-size-2xl: 2.125rem; /* 34px: ticket total */ --font-size-3xl: 2.625rem; /* 42px: pay-screen amount due */ --line-height-tight: 1.15; --line-height-normal: 1.4; --line-height-relaxed: 1.6; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ============================================================ SPACING SCALE 8px grid. Generous by default for content a bartender reads or a finger reaches for (a drink row, a tile, a touch target). DEC-053 (docs/decision-register.md, 2026-09-04) narrows the old blanket rule here ("density is never the way we buy back space") to that content specifically: "I think in general we could condense the UI a bit to make more space. That tablet screen is going to get very crowded very fast." Density is now the approved way to buy back space in CHROME (a header block, a totals summary, a row of secondary chips) and in whitespace, never in a touch target (--touch-target-min stays 44px everywhere) and never by making an affordance hover-dependent. See "DENSITY: compact chrome" below, the token layer DEC-053 asks every floor screen to share rather than each hand-tuning its own chrome spacing. ============================================================ */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ /* The one step below --space-1, added for DEC-053. Chrome-only: the vertical padding on a compact, non-interactive banner or summary line (design/mockups/ticket-rail-redesign-blocked.html's .pay-block-reason is the first user), never the padding inside a touch target's own box, which stays on the --space-2/--space-3 scale those already use. */ --space-hairline: 0.125rem; /* 2px */ /* ============================================================ RADII ============================================================ */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 999px; /* ============================================================ ELEVATION Depth communicates layering (tile above surface, sheet above screen) instead of borders. Kept as a neutral near-black shadow rather than tied to any theme's text color, so it works unchanged whether the active theme's surface is light or dark. ============================================================ */ --shadow-1: 0 1px 2px rgba(20, 18, 15, 0.06), 0 1px 1px rgba(20, 18, 15, 0.04); --shadow-2: 0 2px 8px rgba(20, 18, 15, 0.09), 0 1px 2px rgba(20, 18, 15, 0.05); --shadow-3: 0 12px 32px rgba(20, 18, 15, 0.16), 0 3px 8px rgba(20, 18, 15, 0.07); --shadow-focus: 0 0 0 3px var(--color-focus-ring); /* ============================================================ TOUCH TARGETS Wet fingers, low light, moving fast. Nothing tappable is smaller than 44px. Primary actions (Prepared, Pay) get the largest tier. ============================================================ */ --touch-target-min: 44px; --touch-target-comfortable: 56px; --touch-target-primary: 64px; --touch-target-gap-min: 8px; /* minimum gap between adjacent targets */ /* ============================================================ DENSITY: compact chrome (DEC-053, docs/decision-register.md) A named, reusable scale for the CHROME around a floor screen's main content: a header block, a totals or summary block, a row of secondary chips. It never governs a touch target's own size (that stays --touch-target-min/comfortable/primary, unchanged) and never the primary content those chrome elements frame (a drink row, a tile, a list item), which keeps the generous spacing scale above. UX13 (docs/backlog.md) is the first application, in design/mockups/ticket-rail-redesign-blocked.html and -payable.html; DEC-053 names Open Tabs, drink selection, the liquor sheet, the count screens, and the manager-approval prompt as the next floor screens meant to reuse these five tokens instead of each hand-tuning its own chrome spacing. Every value here is a reference to a token already defined above, not a new literal, so there is exactly one place any of these numbers can be changed. Admin/settings surfaces are out of DEC-053's scope (CLAUDE.md's touch-only rule already draws that line); this section is for the floor only. --chrome-row-height: a chrome row that shares its height with the tallest control it holds (a chip, an icon button) costs nothing beyond that control's own --touch-target-min floor, so a header row and its buttons can be the same 44px rather than the row adding its own padding on top. --chrome-gap-tight / --chrome-gap-hairline: the padding and gaps between chrome elements that are NOT both touch targets (a totals line, a compact banner). --chrome-gap-target is the one gap in this list still held to the 44px-adjacent-targets rule (two buttons next to each other), aliased here so a screen composing a chrome row does not have to remember which of its gaps is the one that cannot shrink. --font-size-chrome / --line-height-chrome: the smallest type size and tightest line-height this scale allows for chrome text. Never smaller than --font-size-xs: a tab's age or a Subtotal figure is still real information read at arm's length, not a caption to be shrunk further. */ --chrome-row-height: var(--touch-target-min); --chrome-gap-tight: var(--space-1); --chrome-gap-hairline: var(--space-hairline); --chrome-gap-target: var(--touch-target-gap-min); --font-size-chrome: var(--font-size-xs); --line-height-chrome: var(--line-height-tight); /* ============================================================ MOTION Motion communicates a state change (line moves to Prepared, sheet slides in) and nothing else. No decorative animation. ============================================================ */ --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); /* ============================================================ Z-INDEX ============================================================ */ --z-sticky: 10; --z-ticket-rail: 20; --z-sheet: 100; --z-scrim: 90; --z-toast: 200; } /* --color-focus-ring is declared here as a base token so that any component referencing it before a theme loads does not error, but every theme file overrides it with an accent-derived value. Treat the value below as a placeholder only; the shipped value always comes from the active theme. */ :root { --color-focus-ring: rgba(28, 26, 22, 0.45); }