/* ============================================================================ Tokens - Surfaces system/tokens/surfaces.css Scope-level surface variants. Controlled by the `data-surface` attribute on any ancestor (usually for a whole product, or a subtree for a live preview inside the Stylebook). Values: (no attribute) = haptic-dark (default). GM Greens base, white text, heavy shadows tuned for the deep green canvas. Used by the POS Bridge (Tauri shell, maintenance, errors, onboarding). data-surface="light" = kiosk-light. White canvas, dark green text, sharp corners (4px), subtle shadows. Used by the SCO kiosk and POS 2.0 terminal. Same tactile tile language as Bridge (gradient fills + inset highlight + press feedback) but the whole scene is inverted for a clean "industrial appliance" feel. Not like a website. Orthogonal to `data-mode="accessible"` (WCAG override). Surface + accessible combine cleanly: accessible raises contrast on top of the chosen surface. See sibling surfaces.md for rationale, scope decisions, do/don't. ============================================================================ */ [data-surface="light"] { /* Force color re-evaluation at this scope. Without this declaration, descendants inherit the computed `color` from a parent where the tokens were NOT yet flipped (e.g. body.gm renders color = white because data-surface sits on .content, not on body). The inherited computed white stays white for every descendant unless we re-read the token here. Same reasoning for background, so the surface element itself takes the light canvas even if a consumer forgets to set it inline. */ color: var(--gm-text-primary); background: var(--gm-bg-base); /* Backgrounds */ --gm-bg-base: #ffffff; --gm-bg-elevated: #f5f5f4; /* matches --gm-g1 */ --gm-bg-sunken: #e7e5e4; /* matches --gm-g2 */ --gm-bg-overlay: rgba(28, 25, 23, 0.55); /* deep warm stone, transparent */ /* Text */ --gm-text-primary: var(--gm-g9); /* #1c1917 */ --gm-text-secondary: var(--gm-g7); /* #44403c */ --gm-text-tertiary: var(--gm-g5); /* #78716c, only on pure white */ --gm-text-muted: var(--gm-g5); /* --gm-text-inverse stays white - still used on green primary fills */ /* Accent (mint -> deep green) */ --gm-accent: var(--gm-p); /* deep green for links, focus rings */ --gm-accent-strong: var(--gm-pd); --gm-accent-fill: var(--gm-p); --gm-accent-hover: var(--gm-pm); /* Borders (opaque warm stone instead of semi-transparent mint) */ --gm-border-subtle: var(--gm-g2); /* #e7e5e4 */ --gm-border-default: var(--gm-g3); /* #d6d3d1 */ --gm-border-strong: var(--gm-g7); /* Status colours - pick values that read on white */ --gm-success: var(--gm-p); /* deep green, AA on white */ --gm-warning: #c26200; /* darker orange, AA on white (was #f57c00 too pale) */ --gm-danger: #c62828; /* POS-aligned red, AA on white */ --gm-info: #0288d1; /* POS-aligned blue, AA on white */ /* Sharp, industrial corners. Adrian: "Modern, schlank, soll nicht aussehen wie Webseite". Kiosks are appliances, not pages. */ --gm-radius-sm: 2px; --gm-radius-md: 4px; --gm-radius-lg: 6px; --gm-radius-xl: 8px; --gm-radius-pill: 9999px; /* still round for avatars, toggles */ /* Shadows swap to the light-bg variants (already defined in shadows.css) */ --gm-shadow-sm: var(--gm-shadow-sm-light); --gm-shadow-md: var(--gm-shadow-md-light); --gm-shadow-lg: var(--gm-shadow-lg-light); }