/**
 * Pathao Kiosk Design System - CSS Variables & Tokens
 * Based on 1080x1920 Portrait Touchscreen Kiosk Specifications
 */

:root {
  /* Kiosk Viewport Dimensions */
  --kiosk-width: 1080px;
  --kiosk-height: 1920px;
  --kiosk-aspect-ratio: 9 / 16;

  /* Color Palette - Pathao Brand */
  --color-pathao-red: #F42339;
  --color-pathao-red-hover: #E0182E;
  --color-pathao-red-active: #C81023;
  --color-pathao-red-glow: rgba(244, 35, 57, 0.25);

  /* Color Palette - Pathao Commerce Brand */
  --color-commerce-purple: #6B32CD;
  --color-commerce-purple-hover: #5D26C0;
  --color-commerce-purple-active: #4F1BB5;
  --color-commerce-purple-glow: rgba(107, 50, 205, 0.25);

  /* Neutral Tones */
  --color-bg-light: #FEFEFE;
  --color-bg-gradient-top: #FFFFFF;
  --color-bg-gradient-bottom: #F6F7FA;
  --color-text-primary: #121212;
  --color-text-white: #FFFFFF;
  --color-text-muted: #6B7280;
  --color-border-subtle: rgba(0, 0, 0, 0.06);

  /* Grid & Spacing */
  --grid-margin-x: 184px;
  --card-size: 334px;
  --card-gap: 44px;
  --card-radius: 26px;
  --banner-height: 240px;
  --banner-radius: 26px;

  /* Typography */
  --font-family-primary: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-title: 96px;
  --font-weight-title: 800;
  --line-height-title: 1.1;

  --font-size-card: 40px;
  --font-weight-card: 600;
  --line-height-card: 1.25;

  --font-size-banner: 52px;
  --font-weight-banner: 600;

  /* Touch & Feedback */
  --touch-press-scale: 0.95;
  --touch-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --touch-transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --card-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  --card-shadow-active: 0 4px 16px rgba(0, 0, 0, 0.16);

  /* Inactivity & Timers (in milliseconds) */
  --idle-return-ms: 45000;
  --video-idle-return-ms: 30000;
}