/* The design tokens, in one place. * * This lives in the Go asset tree rather than in apps/packages, and that * inversion is the point: the public site is plain HTML with no build step - * a virtue worth keeping - so it takes this as one more , served by the * handler that already serves everything else. The Vite apps import the same * file through an alias. Neither side owns a copy. */ :root { /* Ivory, forest and brass: a light dining room rather than a dark one. The paper is warm ivory, the ink a green-black, the accent an antique brass that holds 4.8:1 on the paper as running text, and the forest green carries anything that has to be pressed. Contexts that sit on a photo (hero, tiles, the lunch banner, the footer) flip to the on-dark set in style.css; the host stand keeps the original dark tokens below. */ --paper: #f7f3ea; --paper-2: #efe9dc; --paper-3: #e5dccb; --line: rgba(28, 42, 35, 0.12); --line-strong: rgba(28, 42, 35, 0.26); --ink: #1c2a23; --ink-2: rgba(28, 42, 35, 0.76); --ink-3: rgba(28, 42, 35, 0.6); --gold: #85662a; --gold-2: #6a5020; --gold-dim: rgba(133, 102, 42, 0.12); --accent: #1f4a3a; --accent-2: #163628; --on-accent: #f7f3ea; --btn-bg: var(--accent); --btn-bg-hover: var(--accent-2); --btn-ink: var(--on-accent); --pill-bg: rgba(28, 42, 35, 0.06); --red: #7b2331; --red-2: #a1303f; --green: #2e7d55; --sans: "Josefin Sans", "Segoe UI", system-ui, sans-serif; --script: "Cormorant Garamond", Georgia, serif; --serif: "Cormorant Garamond", Georgia, serif; --wrap: 1440px; --radius: 2px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --shadow: 0 24px 60px rgba(28, 42, 35, 0.16); /* How far down the page the sticky bars reach. app.js measures the real heights and overwrites both - the demo banner, the info board and the wrapping menu toolbar are all different heights per language and per screen, so a fixed number buried section headings under the bar. These are only the no-JS fallbacks. */ --header-h: 112px; --stick: 150px; } /* The host stand ("Sala") is a full-screen tablet UI built on the original dark tokens, with its own warm-black surfaces hard-coded beside them (floor.css). It keeps that set verbatim: a light stand on a dim host desk is the wrong tool, and floor.css is scoped to .page-floor for exactly this reason. */ .page-floor { --paper: #0b0a09; --paper-2: #14120f; --paper-3: #1c1915; --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16); --ink: #efe9df; --ink-2: rgba(239, 233, 223, 0.72); --ink-3: rgba(239, 233, 223, 0.5); --gold: #d9a868; --gold-2: #e8c28a; --gold-dim: rgba(217, 168, 104, 0.18); --red: #d9262b; --red-2: #f04a4f; --green: #7fc79a; --shadow: 0 20px 60px rgba(0, 0, 0, 0.55); } /* Maiolica - the operator panel's colour system. * * Caltagirone's pigment set: ochre, cobalt, copper green, manganese, iron red, * and the terracotta and almond of the unglazed body. The gold the site * already uses is one of them, which is why the rest sit beside it rather than * looking borrowed from somebody else's dashboard. * * Scoped to the panel: layout.html emits and the * panel handlers set "admin" and "kitchen". A class selector outranks :root, * so the order of the two stylesheets does not matter. * * Every ratio below is computed (WCAG 2.1 relative luminance), not estimated. */ .page-admin, .page-kitchen { /* Light-surface neutrals on the panel's own paper. --muted is used in the panel and defined nowhere else. */ --panel-bg: #f4f1ea; --panel-card: #ffffff; --ink: #22201b; /* 16.27:1 on white */ --ink-2: #4a4238; /* 9.87:1 */ --muted: #6b6559; /* 5.78:1 on white, 5.13:1 on --panel-bg */ --line: rgba(28, 22, 14, 0.12); --line-soft: rgba(28, 22, 14, 0.06); /* gridlines, donut track */ /* Categorical series, assigned in this order. Worst-case separation across normal/protan/deutan/tritan vision is dE 13.4 (majolica vs manganese): separable, not identical, which is why every legend prints its value. */ --c-1: #d9a868; /* ochre glaze - brand. Pizza, revenue. */ --c-2: #2f5f96; /* cobalt - the cold hue. 6.57:1 */ --c-3: #c2603a; /* terracotta, the unglazed body. 4.18:1 */ --c-4: #3f8f86; /* verderame, copper green. 3.83:1 */ --c-5: #5f3a6e; /* manganese, aubergine glaze. 9.06:1 */ --c-6: #9c2b2b; /* madder, iron red. Cantina. 7.52:1 */ --c-7: #d8c9ae; /* mandorla, almond biscuit. 1.63:1 */ /* Darkened variants for hairline strokes and for text set IN a series colour. --c-1 is 2.15:1 on white: fine as a filled area under a hairline, not fine as a 2.5px stroke or a numeral. */ --c-1-ink: #a8762e; /* 3.97:1 */ --c-4-ink: #2d6b64; /* 6.18:1 */ /* Semantic. A word always sits next to these. */ --ok: #6f8f3f; /* pistacchio di Bronte, 3.70:1 */ --warn: #c2603a; --bad: #9c2b2b; /* Sequential ramp, six steps: the panel's own paper, through the gold, into terracotta, down to iron red. The luminances fall monotonically (.884 .695 .492 .310 .159 .078) and stay monotone under simulated protanopia, deuteranopia and tritanopia, so the heatmap reads as pure lightness under any colour vision and on the bar's black-and-white printer. Ink holds 5.59:1 on --heat-3 and collapses to 3.24:1 on --heat-4, where white picks up at 5.02:1: levels 0-3 take --ink, levels 4-5 take white, and no step is left in the dead zone between. */ --heat-0: #f7f1e6; /* an open hour with nothing in it */ --heat-1: #eed7a4; --heat-2: #e2b273; --heat-3: #cf8747; --heat-4: #b0552f; --heat-5: #8a3128; /* the busiest cell */ --heat-closed: rgba(28, 22, 14, 0.05); /* Status pills: a tint and ink from the same family. */ --pill-pending-bg: #f3ede0; --pill-pending-fg: #6b5c3c; /* 5.59 */ --pill-accepted-bg: #e6eef7; --pill-accepted-fg: #274f7d; /* 7.17 */ --pill-preparing-bg: #fdf2dc; --pill-preparing-fg: #7a5406; /* 6.10 */ --pill-ready-bg: #e2f0ec; --pill-ready-fg: #23655c; /* 5.80 */ --pill-completed-bg: #edf2e0; --pill-completed-fg: #4c6626; /* 5.68 */ --pill-cancelled-bg: #f0e9ef; --pill-cancelled-fg: #5f3a6e; /* 7.60 */ --pill-delayed-bg: #f8e5e4; --pill-delayed-fg: #8e2626; /* 7.05 */ --card-shadow: 0 1px 2px rgb(28 22 14 / 0.05), 0 8px 24px -12px rgb(28 22 14 / 0.16); }