/* ============================================================================ * Picky — shared design tokens (2026-06-09) * * Single source of truth for color, type scale, spacing, radii, shadows and * motion. Each app can @import this at the top of its own CSS and use the * `--pk-*` namespace alongside (or instead of) its existing variables. Pure * additive — defining --pk-* doesn't touch app-specific tokens like * --accent, --bg, --text, so nothing existing breaks. * * Design intent: * - Modern, calm, considered. Not flashy. The food brands provide the * personality; the chrome stays out of the way. * - Strong type hierarchy. Inter for UI/body, Space Grotesk for display. * - 4px base spacing rhythm. Radii feel "soft but not bubbly". * - Motion that's quick (180ms) so the UI feels responsive, never * theatrical. Reduced-motion users get instant transitions. * - Tokens that flex light/dark via the .pk-dark utility class on * or . Till + Staff already run dark; Storefront + Admin light. * ============================================================================ */ :root { /* -- Type stack ------------------------------------------------------- */ --pk-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --pk-font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --pk-font-mono: ui-monospace, "SF Mono", "Menlo", "Consolas", monospace; /* Modular type scale (1.200 ratio) — feels editorial without shouting */ --pk-text-xs: 12px; --pk-text-sm: 14px; --pk-text-base: 16px; --pk-text-md: 18px; --pk-text-lg: 22px; --pk-text-xl: 28px; --pk-text-2xl: 36px; --pk-text-3xl: 44px; --pk-leading-tight: 1.2; --pk-leading-snug: 1.35; --pk-leading-base: 1.5; --pk-leading-loose: 1.7; --pk-tracking-tight: -0.02em; --pk-tracking-snug: -0.01em; --pk-tracking-normal: 0; --pk-tracking-wide: 0.04em; /* -- Spacing (4px rhythm) -------------------------------------------- */ --pk-space-1: 4px; --pk-space-2: 8px; --pk-space-3: 12px; --pk-space-4: 16px; --pk-space-5: 20px; --pk-space-6: 24px; --pk-space-8: 32px; --pk-space-10: 40px; --pk-space-12: 48px; --pk-space-16: 64px; --pk-space-20: 80px; /* -- Radii ----------------------------------------------------------- */ --pk-radius-xs: 4px; --pk-radius-sm: 6px; --pk-radius-md: 10px; /* default for cards */ --pk-radius-lg: 14px; --pk-radius-xl: 20px; --pk-radius-2xl: 28px; --pk-radius-pill: 9999px; /* -- Shadows (very subtle — depth via stacking not glow) ------------- */ --pk-shadow-xs: 0 1px 1px rgba(15, 17, 21, 0.04); --pk-shadow-sm: 0 1px 2px rgba(15, 17, 21, 0.06), 0 1px 1px rgba(15, 17, 21, 0.03); --pk-shadow-md: 0 4px 12px rgba(15, 17, 21, 0.08), 0 2px 4px rgba(15, 17, 21, 0.04); --pk-shadow-lg: 0 12px 28px rgba(15, 17, 21, 0.12), 0 4px 8px rgba(15, 17, 21, 0.06); --pk-shadow-xl: 0 24px 56px rgba(15, 17, 21, 0.18), 0 8px 16px rgba(15, 17, 21, 0.08); --pk-shadow-inner: inset 0 1px 0 rgba(255,255,255,0.06); /* -- Motion ----------------------------------------------------------- */ --pk-motion-fast: 120ms; --pk-motion-base: 180ms; --pk-motion-slow: 320ms; --pk-motion-ease: cubic-bezier(0.4, 0.0, 0.2, 1); --pk-motion-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); --pk-motion-ease-in: cubic-bezier(0.4, 0.0, 1.0, 1); --pk-motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* light overshoot */ /* -- Z-index scale --------------------------------------------------- */ --pk-z-base: 1; --pk-z-dropdown: 100; --pk-z-sticky: 200; --pk-z-overlay: 300; --pk-z-modal: 400; --pk-z-toast: 500; /* -- Light palette (default) ----------------------------------------- */ --pk-color-bg: #fafaf9; /* page background */ --pk-color-surface: #ffffff; /* card / panel */ --pk-color-surface-2: #f5f5f4; /* sunken / muted card */ --pk-color-surface-hover:#f0efed; /* row hover */ --pk-color-border: #e7e5e2; --pk-color-border-strong:#d6d3d0; --pk-color-text: #1a1a1a; --pk-color-text-muted: #6b6864; --pk-color-text-subtle: #9a948e; --pk-color-primary: #d92d20; /* Picky red */ --pk-color-primary-hover: #c0241a; --pk-color-primary-active: #a51e15; --pk-color-on-primary: #ffffff; --pk-color-primary-soft: #fdecea; --pk-color-success: #0f7b3f; --pk-color-success-soft: #dcf5e6; --pk-color-warning: #b16500; --pk-color-warning-soft: #fdf2dc; --pk-color-danger: #b3261e; --pk-color-danger-soft: #fde8e6; --pk-color-info: #1f4d8b; --pk-color-info-soft: #e6efff; /* Focus ring — accessible (≥3:1 contrast vs surface) without being garish */ --pk-color-focus-ring: #d92d20; --pk-focus-ring: 0 0 0 3px rgba(217, 45, 32, 0.28); --pk-focus-ring-offset: 2px; } /* Dark palette — opt-in via .pk-dark on html or body. The Till + Staff apps use this. The storefront + admin stay light. IMPORTANT: keep semantic names the same — only the values flip. */ .pk-dark, :root[data-theme="dark"], :root.pk-dark { --pk-color-bg: #0f1115; --pk-color-surface: #1a1d22; --pk-color-surface-2: #21252e; --pk-color-surface-hover:#262b34; --pk-color-border: #2b303a; --pk-color-border-strong:#3a414e; --pk-color-text: #eef1f4; --pk-color-text-muted: #9098a3; --pk-color-text-subtle: #62686f; --pk-color-primary: #7cc4ff; /* a softer, dark-mode-friendly accent */ --pk-color-primary-hover: #9ad2ff; --pk-color-primary-active: #62b0e9; --pk-color-on-primary: #0f1115; --pk-color-primary-soft: rgba(124, 196, 255, 0.14); --pk-color-success: #5cd99a; --pk-color-success-soft: rgba(92, 217, 154, 0.14); --pk-color-warning: #f4b740; --pk-color-warning-soft: rgba(244, 183, 64, 0.14); --pk-color-danger: #ff6b6b; --pk-color-danger-soft: rgba(255, 107, 107, 0.14); --pk-color-info: #74a8ff; --pk-color-info-soft: rgba(116, 168, 255, 0.14); --pk-color-focus-ring: #7cc4ff; --pk-focus-ring: 0 0 0 3px rgba(124, 196, 255, 0.32); --pk-shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.4); --pk-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3); --pk-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.25); --pk-shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.3); --pk-shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.35); } /* Respect user's motion preference — replace all token-driven transitions with near-instant ones. Apps don't have to opt in; this just clips the timing when --pk-motion-* are read in styles below. */ @media (prefers-reduced-motion: reduce) { :root { --pk-motion-fast: 1ms; --pk-motion-base: 1ms; --pk-motion-slow: 1ms; } }