/* ============================================================ PLATE — DESIGN TOKENS Direction: "The Pass" — stainless steel, order tickets, heat lamps. Grounded in the actual subject: a working kitchen expo line. Deliberately NOT: cream+terracotta, acid-green pop, purple gradients. ============================================================ */ :root { /* ---- Type families -------------------------------------- */ /* Editorial serif carries the *ideas* — hooks should read like crafted thoughts, not system output. All faces are local: the app must work fully offline / from file://. */ --font-display: "New York", ui-serif, "Iowan Old Style", "Hoefler Text", "Palatino", Georgia, serif; --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; /* ---- Type scale (1.2 minor third, 15px base) ------------- */ --fs-2xs: 10.5px; --fs-xs: 11.5px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 21px; --fs-2xl: 26px; --fs-3xl: 33px; --fs-4xl: 42px; --lh-tight: 1.14; --lh-snug: 1.32; --lh-body: 1.55; --lh-loose: 1.7; --tracking-cap: 0.09em; /* mono/eyebrow labels */ --tracking-tight: -0.018em; /* ---- Spacing (4px base) --------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; --s-11: 96px; /* ---- Radii ----------------------------------------------- Restrained + varied. Tickets are nearly square; controls are softer; nothing is uniformly pill-shaped. */ --r-xs: 3px; --r-sm: 5px; --r-md: 8px; --r-lg: 12px; --r-full: 999px; /* ---- Motion --------------------------------------------- */ --e-out: cubic-bezier(0.22, 0.8, 0.3, 1); --e-in-out: cubic-bezier(0.5, 0, 0.2, 1); --t-fast: 110ms; --t-mid: 190ms; --t-slow: 320ms; /* ---- Layout --------------------------------------------- */ --nav-w: 246px; --shell-max: 1360px; --read-max: 68ch; --tabbar-h: 58px; --z-nav: 40; --z-sticky: 60; --z-modal: 100; --z-toast: 120; } /* ============================================================ DARK — the default. A kitchen at night, stainless under a lamp. ============================================================ */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #0B0E13; /* CravEngine ground */ --bg-sunk: #07090C; --surface: #11151B; /* cards, panels */ --surface-2: #191E26; /* raised: inputs, hovers */ --surface-3: #232932; /* raised x2: pressed, chips */ --line: #23282F; --line-strong: #333A44; --ink: #FAF9F7; /* CravEngine cream */ --ink-2: #B9BFC7; /* secondary */ --ink-3: #9CA3AF; /* CravEngine muted */ --ink-4: #6B727B; /* ⛔ DISABLED ONLY — see below */ /* ⭐ THE QUIET INK. Measured across 8 screens: --ink-4 clears only 3.01–3.97:1 against Plate's four dark grounds, and it was carrying real text — "optional", "by CravEngine", the version stamp, the upload note. That is a WCAG AA failure on live copy, and three of the ten failures were introduced by the batch that was meant to raise quality. --ink-4 stays exactly as it is, because DISABLED text is exempt and should look disabled. Text that a person is expected to read moves to this token, which clears 4.5:1 on --bg, --surface, --surface-2 AND --surface-3 — checked against all four, not just the darkest. */ --ink-quiet: #8C9199; /* 4.62:1 worst case on any dark ground */ /* Heat lamp — the single functional accent for primary action */ --accent: #E5482A; /* flame orange */ --accent-ink: #0B0E13; /* text on accent */ --accent-2: #FF6144; /* hover */ --accent-soft: rgba(229,72,42,0.15); --accent-line: rgba(229,72,42,0.36); /* ⭐ Text ON the soft accent tint. The accent itself scores 4.01:1 against its own 15% wash — a fail on every selected chip in the product. The hue is unchanged; only the value is lifted enough to read. */ --accent-on-soft: #FF6144; /* 5.34:1 on --accent-soft over --surface */ /* Semantics */ --good: #58A87A; --good-soft: rgba(88,168,122,0.15); --warn: #D9A03C; --warn-soft: rgba(217,160,60,0.15); --bad: #E05B44; --bad-soft: rgba(224,91,68,0.15); /* chile */ --info: #6C9FC0; --info-soft: rgba(108,159,192,0.15); --focus: #8FC2E0; --shadow-1: 0 1px 2px rgba(0,0,0,0.45); --shadow-2: 0 4px 14px -4px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.4); --shadow-3: 0 22px 50px -18px rgba(0,0,0,0.78), 0 2px 8px rgba(0,0,0,0.45); --scrim: rgba(8,10,12,0.72); --ticket-notch: #131619; /* must equal --bg: punches the perforation */ } /* ============================================================ LIGHT — daytime prep. Cool stainless white, never cream. ============================================================ */ :root[data-theme="light"] { color-scheme: light; --bg: #EDEFF1; --bg-sunk: #E2E5E8; --surface: #FFFFFF; --surface-2: #F3F5F7; --surface-3: #E7EAEE; --line: #DBE0E5; --line-strong: #C2C9D1; --ink: #14181C; --ink-2: #444E57; --ink-3: #6B757E; --ink-4: #98A1A9; /* disabled only */ --ink-quiet: #505A63; /* 5.83:1 worst case on any light ground */ --accent: #C13A20; /* darkened for AA on white */ --accent-ink: #FFFFFF; --accent-2: #A32E17; --accent-soft: rgba(193,58,32,0.12); --accent-line: rgba(193,58,32,0.34); --accent-on-soft: #9A2B14; /* darkened for AA on the light wash */ --good: #2F7B50; --good-soft: rgba(47,123,80,0.12); --warn: #96661A; --warn-soft: rgba(150,102,26,0.13); --bad: #B93A24; --bad-soft: rgba(185,58,36,0.11); --info: #35688B; --info-soft: rgba(53,104,139,0.12); --focus: #1E6FA8; --shadow-1: 0 1px 1px rgba(20,26,32,0.06); --shadow-2: 0 3px 10px -3px rgba(20,26,32,0.14), 0 1px 2px rgba(20,26,32,0.07); --shadow-3: 0 20px 44px -16px rgba(20,26,32,0.24), 0 2px 6px rgba(20,26,32,0.1); --scrim: rgba(30,36,42,0.42); --ticket-notch: #EDEFF1; } @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: #EDEFF1; --bg-sunk: #E2E5E8; --surface: #FFFFFF; --surface-2: #F3F5F7; --surface-3: #E7EAEE; --line: #DBE0E5; --line-strong: #C2C9D1; --ink: #14181C; --ink-2: #444E57; --ink-3: #6B757E; --ink-4: #98A1A9; --ink-quiet: #505A63; --accent: #C13A20; --accent-ink: #FFFFFF; --accent-2: #A32E17; --accent-soft: rgba(193,58,32,0.12); --accent-line: rgba(193,58,32,0.34); --accent-on-soft: #9A2B14; --good: #2F7B50; --good-soft: rgba(47,123,80,0.12); --warn: #96661A; --warn-soft: rgba(150,102,26,0.13); --bad: #B93A24; --bad-soft: rgba(185,58,36,0.11); --info: #35688B; --info-soft: rgba(53,104,139,0.12); --focus: #1E6FA8; --shadow-1: 0 1px 1px rgba(20,26,32,0.06); --shadow-2: 0 3px 10px -3px rgba(20,26,32,0.14), 0 1px 2px rgba(20,26,32,0.07); --shadow-3: 0 20px 44px -16px rgba(20,26,32,0.24), 0 2px 6px rgba(20,26,32,0.1); --scrim: rgba(30,36,42,0.42); --ticket-notch: #EDEFF1; } } /* ============================================================ ANGLE FAMILY COLOR SYSTEM 14 families. Colour is *information*, not decoration — the same hue means the same family on the ticket, the chip, the calendar block and the history row. Hues are spaced far enough apart to stay tellable at 8px on a calendar cell. ============================================================ */ :root { --fam-dish: #E0663F; /* seared orange */ --fam-process: #C58B2E; /* browned butter */ --fam-heritage: #A8603F; /* clay / adobe */ --fam-people: #C8598B; /* front of house */ --fam-proof: #4E9B7E; /* verified green */ --fam-rhythm: #5E8DBE; /* clock blue */ --fam-season: #7DA33F; /* produce */ --fam-opinion: #D0453C; /* hot take */ --fam-bts: #8A7BC8; /* back of house */ --fam-educate: #3F9AA8; /* chalkboard teal */ --fam-engage: #D98A28; /* invite amber */ --fam-local: #6C8F73; /* neighborhood */ --fam-menu: #9A8757; /* paper / menu */ --fam-deal: #C7452F; /* promo red */ /* Quick posts sit outside the angle library, so they had no colour at all — `var(--fam-custom)` resolved to nothing and they rendered with no dot and no left edge. On a calendar full of coloured rows, the one with no colour reads as broken. */ --fam-custom: #7F8B99; /* one-off, slate */ }