/* Kiosk-X design tokens v2.0.0 — generated from app/design_tokens.py.
 * Canonical doc: /guides/design-system · JSON: /design/tokens.json
 * Do not hand-edit downstream copies; consume this file. */
:root {
  --kx-coral-500: #f05a47;
  --kx-coral-700: #c9412f;
  --kx-coral-300: #ff8a75;
  --kx-amber-500: #f5c66c;
  --kx-amber-300: #ffdd99;
  --kx-cream: #fff9e9;
  --kx-ink: #151515;
  --kx-purple-500: #f05a47;
  --kx-purple-700: #c9412f;
  --kx-cyan-400: #ff8a75;
  --kx-cyan-300: #ffb3a5;
  --kx-pink-500: #f5c66c;
  --kx-teal-500: #2fb27f;
  --kx-teal-600: #25955f;
  --kx-rose-400: #ff6b6b;
  --kx-green-400: #3ecf93;
  --kx-bg: #151515;
  --kx-panel: #1c1c1c;
  --kx-surface: #202020;
  --kx-surface-2: #262626;
  --kx-kiosk-shell: #0a0a0a;
  --kx-line: #333333;
  --kx-line-bright: #3d3d3d;
  --kx-line-glow: #444444;
  --kx-text: #fafafa;
  --kx-muted: #b8b8b8;
  --kx-gradient-brand: linear-gradient(90deg, #ff8a75, #f05a47 55%, #f5c66c);
  --kx-gradient-action: linear-gradient(90deg, #f05a47, #c9412f);
  --kx-gradient-hero: linear-gradient(135deg, #c9412f, #f05a47);
  --kx-gradient-price: linear-gradient(90deg, #ff8a75, #f05a47);
  --kx-gradient-age-18: linear-gradient(90deg, #f5c66c, #f05a47);
  --kx-gradient-age-21: linear-gradient(90deg, #c9412f, #f05a47);
  --kx-gradient-screen: radial-gradient(120% 90% at 20% 0%, #202020 0%, #191919 45%, #151515 100%);
  --kx-font-display: 'Montserrat Alternates', Sora, Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --kx-font-body: Sora, Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
  --kx-font-cta: Poppins, Sora, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --kx-font-mono: ui-monospace, Menlo, monospace;
  --kx-radius-sm: 8px;
  --kx-radius-md: 12px;
  --kx-radius-lg: 14px;
  --kx-radius-xl: 16px;
  --kx-radius-button: 12px;
  --kx-radius-card: 16px;
  --kx-radius-screen: 14px;
  --kx-radius-device: 22px;
  --kx-radius-pill: 999px;
  --kx-shadow-device: 0 30px 60px rgba(0,0,0,.55), 0 0 40px rgba(240,90,71,.06);
  --kx-shadow-glow-cyan: 0 0 14px rgba(255,138,117,.25);
  --kx-shadow-glow-cyan-strong: 0 0 20px rgba(255,138,117,.35);
  --kx-shadow-glow-purple: 0 0 20px rgba(240,90,71,.4);
  --kx-shadow-glow-coral: 0 0 20px rgba(240,90,71,.4);
  --kx-shadow-tile-hover: 0 8px 22px rgba(240,90,71,.22);
  --kx-ease-pop: cubic-bezier(.2,1.6,.4,1);
  --kx-ease-count: cubic-bezier(.2,1.5,.4,1);
  --kx-duration-tap: 150ms;
  --kx-duration-hover: 180ms;
  --kx-space-xs: 4px;
  --kx-space-sm: 8px;
  --kx-space-md: 12px;
  --kx-space-lg: 16px;
  --kx-space-xl: 24px;
  --kx-space-2xl: 28px;
}

/* Shared keyframes — the gamified motion vocabulary. */
@keyframes kx-glowpulse { 0%,100% { filter:drop-shadow(0 0 6px rgba(255,138,117,.5)); }
  50% { filter:drop-shadow(0 0 18px rgba(240,90,71,.8)); } }
@keyframes kx-popin { from { transform:scale(.4); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes kx-blink { 50% { opacity:.35; } }
@keyframes kx-floaty { 0%,100% { transform:translateY(0) rotate(-6deg); } 50% { transform:translateY(-16px) rotate(6deg); } }

/* Utility classes for the signature brand treatments. */
.kx-wordmark { font-family:var(--kx-font-display); font-weight:900; letter-spacing:-1px;
  background:var(--kx-gradient-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.kx-btn-primary { background:var(--kx-gradient-action); border:0; color:var(--kx-cream); font-weight:700; font-family:var(--kx-font-cta);
  border-radius:var(--kx-radius-button); cursor:pointer; font-family:inherit; transition:all var(--kx-duration-tap); }
.kx-btn-primary:hover { filter:brightness(1.12); box-shadow:var(--kx-shadow-glow-purple); }
.kx-card { background:var(--kx-panel); border:1px solid var(--kx-line); border-radius:var(--kx-radius-card); }

@media (prefers-reduced-motion: reduce) {
  .kx-wordmark { animation:none !important; }
}