/* * Design tokens for the three kiosk themes. * * The design doc (Check-in Kiosk.dc.html) ships the same screens three ways: * variant 1a hardcodes a warm paper palette, 1b a soft white-card palette, and * 1c a dark split-panel palette. Variant 2a generalises all three into named * slots ({{ ink }}, {{ bgPaper }}, {{ panelBg }}, …). These are those slots, * with each theme's values lifted verbatim from the 1a/1b/1c markup. * * Set the theme by putting data-theme="paper|cards|ink" on . */ :root { --font: 'Figtree', system-ui, -apple-system, sans-serif; /* Geometry is shared across all three themes. */ --r-tile: 20px; --r-card: 26px; --r-field: 14px; --r-pill: 999px; --shadow-card: 0 1px 2px rgba(28, 25, 20, .05), 0 12px 28px rgba(28, 25, 20, .06); --shadow-card-hover: 0 1px 2px rgba(28, 25, 20, .05), 0 22px 40px rgba(28, 25, 20, .1); /* "2a Editor" asks for {{ modalBg }}, which no variant defines separately — the sheet is drawn on the theme's own surface. Indirection, so it follows whichever theme is active. */ --modal-bg: var(--surface); } /* ── Paper & Ink (design variant 1a) ─────────────────────────────────────── */ :root, :root[data-theme='paper'] { --ink: #1B1A16; --muted-text: #8B867A; --muted-text-2: #6E6A61; --line: #DFDACE; --line-strong: #C3BDAE; --arrow: #B4AE9F; --bg-paper: #E6E4DF; --bg-cards: #E6E4DF; --bg-page-alt: #EAE5DA; --bg-ink: #1B1A16; --surface: #FAF8F4; --surface-alt: #F4F2ED; --tile-bg: #FAF8F4; --accent: #1F8C86; --accent-ink: #FFFFFF; --accent-soft: #D8ECEA; --accent-edge: #EAE5DA; --btn-bg: #1B1A16; --btn-fg: #FAF8F4; --panel-bg: #1B1A16; --panel-fg: #FAF8F4; --panel-muted: #A8A294; --panel-btn-bg: #FAF8F4; --panel-btn-fg: #1B1A16; } /* ── Soft Cards (design variant 1b) ──────────────────────────────────────── */ :root[data-theme='cards'] { --ink: #1F2224; --muted-text: #7C8285; --muted-text-2: #4E5457; --line: #DCD8D0; --line-strong: #C6C2BA; --arrow: #9AA0A2; --bg-paper: #F2F0EB; --bg-cards: #F2F0EB; --bg-page-alt: #F4F2ED; --bg-ink: #1F2224; --surface: #FFFFFF; --surface-alt: #F4F2ED; --tile-bg: #FFFFFF; --accent: #1F8C86; --accent-ink: #FFFFFF; --accent-soft: #E6EAE5; --accent-edge: #E9E6E0; --btn-bg: #1F2224; --btn-fg: #FFFFFF; --panel-bg: #FFFFFF; --panel-fg: #1F2224; --panel-muted: #7C8285; --panel-btn-bg: #1F2224; --panel-btn-fg: #FFFFFF; } /* ── Ink Split (design variant 1c) ───────────────────────────────────────── */ :root[data-theme='ink'] { --ink: #141516; --muted-text: #8E938F; --muted-text-2: #6C7173; --line: #E6E2DA; --line-strong: #C9CDCB; --arrow: #8B9092; --bg-paper: #F0EDE7; --bg-cards: #F0EDE7; --bg-page-alt: #EDEAE3; --bg-ink: #141516; --surface: #FFFFFF; --surface-alt: #E4E0D8; --tile-bg: #FFFFFF; --accent: #3FD0C4; --accent-ink: #131415; --accent-soft: #D6F5F1; --accent-edge: #E4E0D8; --btn-bg: #141516; --btn-fg: #FFFFFF; --panel-bg: #141516; --panel-fg: #FFFFFF; --panel-muted: #8E938F; --panel-btn-bg: #3FD0C4; --panel-btn-fg: #131415; }