:root {
  /* ===== CINEPASS CINEMA THEME ===== */
  --color-primary: #E50914;
  --color-primary-dark: #C40812;
  --color-primary-hover: #F21B25;
  --color-primary-soft: #3A1115;
  --color-primary-border: rgba(229, 9, 20, 0.35);
  --color-primary-glow: rgba(229, 9, 20, 0.35);

  --color-bg: #120609;
  --color-background: #120609;
  --color-canvas-bg: #090204;
  --color-surface: #1B0A0D;
  --color-surface-soft: #241014;
  --color-surface-elevated: #2C1419;

  --color-text: #FFFFFF;
  --color-text-muted: #C8BFC1;
  --color-text-secondary: #C8BFC1;
  --color-border: rgba(255, 255, 255, 0.10);
  --color-border-hover: rgba(229, 9, 20, 0.4);

  --color-success: #22c55e;
  --color-danger: #ef4444;

  /* Buttons: Rounded rectangular (12px–16px), NEVER capsules/pills */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 14px; /* Overridden to rounded rectangle */

  /* Cinema Shadows */
  --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.6);
  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 16px 36px rgba(229, 9, 20, 0.22);
  --shadow-primary: 0 8px 25px rgba(229, 9, 20, 0.45);
  --shadow-primary-hover: 0 12px 30px rgba(242, 27, 37, 0.6);
  --shadow-button-active: 0 3px 10px rgba(229, 9, 20, 0.35);

  /* Transitions */
  --transition-fast: 160ms cubic-bezier(0.2, 0, 0, 1);
  --transition-normal: 220ms cubic-bezier(0.2, 0, 0, 1);
  --transition-smooth: 280ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-screen: 220ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Touch guidelines & Focus */
  --touch-target-min: 48px;
  --focus-ring: 3px solid rgba(229, 9, 20, 0.65);
  --focus-offset: 3px;

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 20px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;

  --kiosk-width: 1920px;
  --kiosk-height: 1080px;
  --content-max-width: 1720px;

  --font-family: Inter, Poppins, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}