/* ========================================================= LAWAGON POS — DESIGN TOKENS Ground, type and accent are lifted from the website's Tailwind @theme block so the till and the marketing site read as one system. What is new is the state scale. Amber is the brand accent — it means "press this" — so it cannot also mean "waiting". Order state gets its own three tones that appear nowhere else in the brand, and every one is paired with a word in the UI, never colour alone. ========================================================= */ :root { /* grounds — night, which is what the shop looks like at seven */ --night: #0b0a08; --night-soft: #12100c; --surface: #1a1711; --surface-lift: #221e17; --hairline: #2c2720; --hairline-soft: #201c17; /* type */ --cream: #f4ede1; --muted: #9a9085; --muted-dim: #6f675e; /* brand accent */ --amber: #e8a33d; --gold: #f5c563; --ember: #c97a2b; --amber-wash: rgba(232, 163, 61, 0.12); /* state scale, deliberately outside the brand */ --go: #7fa662; --go-wash: rgba(127, 166, 98, 0.14); --wait: #6d92c4; --wait-wash: rgba(109, 146, 196, 0.16); --stop: #cd5f52; --stop-wash: rgba(205, 95, 82, 0.14); /* families */ --display: 'Outfit', ui-sans-serif, system-ui, sans-serif; --body: 'Inter', ui-sans-serif, system-ui, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; --script: 'Dancing Script', ui-serif, Georgia, serif; /* metrics */ --tap: 44px; /* outdoors, at night, sometimes with wet hands */ --radius: 10px; --radius-lg: 16px; --rail: 15.5rem; --pad: clamp(1rem, 2.4vw, 1.9rem); } /* --------------------------------------------------------- DAYLIGHT The dark ground is right at seven in the evening and wrong at eleven in the morning under a canvas umbrella. Driven by a checkbox so the prototype needs no JavaScript; the real app will persist a setting. Amber on white fails contrast, so the accent darkens to ember. --------------------------------------------------------- */ /* Two ways in, on purpose. The checkbox is what a person clicks and takes effect with no script at all; the class is set from storage in before first paint, so navigating between pages in daylight does not flash dark. */ :root:has(#theme-day:checked), :root.theme-day { --night: #f6f2ea; --night-soft: #efe9de; --surface: #ffffff; --surface-lift: #faf7f1; --hairline: #dad1c2; --hairline-soft: #e6dfd3; --cream: #23201a; --muted: #675e52; --muted-dim: #8d8477; --amber: #9c6114; --gold: #7d4d0e; --ember: #7d4d0e; --amber-wash: rgba(156, 97, 20, 0.11); --go: #41682f; --go-wash: rgba(65, 104, 47, 0.12); --wait: #37587f; --wait-wash: rgba(55, 88, 127, 0.12); --stop: #9a382d; --stop-wash: rgba(154, 56, 45, 0.12); } /* ========================================================= TYPE HELPERS ========================================================= */ .headline { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.05; margin: 0; } .eyebrow { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.64rem; color: var(--muted); margin: 0; } /* The shop's own hand. Customer-facing only — never on a control a barista presses. */ .script { font-family: var(--script); font-weight: 600; } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }