/**
 * MetalVision Design Tokens - Kiosko
 * Shared tokens from backoffice with kiosko-specific overrides
 */

:root {
  /* HSL Fallback Colors - Light Mode */
  --bg-dark: hsl(216 73% 91%);
  --bg: hsl(216 100% 97%);
  --bg-light: hsl(216 100% 100%);
  --text: hsl(224 100% 7%);
  --text-muted: hsl(216 34% 30%);
  --highlight: hsl(216 100% 100%);
  --border: hsl(216 24% 53%);
  --border-muted: hsl(216 34% 65%);
  --primary: hsl(216 57% 31%);
  --secondary: hsl(42 100% 15%);
  --danger: hsl(9 25% 41%);
  --warning: hsl(51 29% 33%);
  --success: hsl(148 24% 35%);
  --info: hsl(217 26% 42%);
  
  /* OKLCH Colors - Light Mode */
  --bg-dark: oklch(0.92 0.03 258);
  --bg: oklch(0.96 0.03 258);
  --bg-light: oklch(1 0.03 258);
  --text: oklch(0.15 0.06 258);
  --text-muted: oklch(0.4 0.06 258);
  --highlight: oklch(1 0.06 258);
  --border: oklch(0.6 0.06 258);
  --border-muted: oklch(0.7 0.06 258);
  --primary: oklch(0.4 0.1 258);
  --secondary: oklch(0.4 0.1 78);
  --danger: oklch(0.5 0.06 30);
  --warning: oklch(0.5 0.06 100);
  --success: oklch(0.5 0.06 160);
  --info: oklch(0.5 0.06 260);
  
  /* Aliases for compatibility */
  --bg-0: var(--bg-light);
  --bg-1: var(--bg);
  --bg-2: var(--bg-dark);
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
  --color-primary: var(--primary);
  --color-secondary: var(--secondary);
  --color-tertiary: var(--danger);
  --color-accent: var(--info);
  --error: var(--danger);
  
  /* Shadows */
  --shadow-sm: 0px 1px 2px rgba(0,0,0,0.1), 0px 2px 4px rgba(0,0,0,0.05);
  --shadow-md: 0px 1px 2px rgba(0,0,0,0.2), 0px 4px 8px rgba(0,0,0,0.1);
  --shadow-lg: 0px 2px 4px rgba(0,0,0,0.3), 0px 8px 16px rgba(0,0,0,0.15);
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  
  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;
  
  /* Layout - Kiosko specific */
  --header-height: 80px;
  --footer-height: 60px;
  --border-radius: 12px;
  --border-radius-sm: 6px;
  --border-radius-lg: 16px;
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
}

/* Dark Mode - Default for Kiosko */
:root.dark,
body.dark,
html {
  /* HSL Fallback Colors - Dark Mode */
  --bg-dark: hsl(227 93% 2%);
  --bg: hsl(218 70% 5%);
  --bg-light: hsl(216 45% 10%);
  --text: hsl(216 100% 98%);
  --text-muted: hsl(216 44% 72%);
  --highlight: hsl(216 26% 41%);
  --border: hsl(216 34% 30%);
  --border-muted: hsl(216 49% 20%);
  --primary: hsl(216 78% 74%);
  --secondary: hsl(37 56% 61%);
  --danger: hsl(9 31% 65%);
  --warning: hsl(52 22% 56%);
  --success: hsl(147 21% 58%);
  --info: hsl(217 34% 65%);
  
  /* OKLCH Colors - Dark Mode */
  --bg-dark: oklch(0.1 0.03 258);
  --bg: oklch(0.15 0.03 258);
  --bg-light: oklch(0.2 0.03 258);
  --text: oklch(0.96 0.06 258);
  --text-muted: oklch(0.76 0.06 258);
  --highlight: oklch(0.5 0.06 258);
  --border: oklch(0.4 0.06 258);
  --border-muted: oklch(0.3 0.06 258);
  --primary: oklch(0.76 0.1 258);
  --secondary: oklch(0.76 0.1 78);
  --danger: oklch(0.7 0.06 30);
  --warning: oklch(0.7 0.06 100);
  --success: oklch(0.7 0.06 160);
  --info: oklch(0.7 0.06 260);
  
  /* Aliases for compatibility */
  --bg-0: var(--bg);
  --bg-1: var(--bg-light);
  --bg-2: var(--bg-dark);
  --text-primary: var(--text);
  --text-secondary: var(--text-muted);
  --color-primary: var(--primary);
  --color-secondary: var(--secondary);
  --color-tertiary: var(--danger);
  --color-accent: var(--info);
  --error: var(--danger);
  
  /* Shadows - Darker for dark mode */
  --shadow-sm: 0px 1px 2px rgba(0,0,0,0.4), 0px 2px 4px rgba(0,0,0,0.2);
  --shadow-md: 0px 1px 2px rgba(0,0,0,0.4), 0px 4px 8px rgba(0,0,0,0.15);
  --shadow-lg: 0px 2px 4px rgba(0,0,0,0.5), 0px 8px 16px rgba(0,0,0,0.25);
}

/* Base Styles */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-lg);
  color: var(--text-primary);
  background-color: var(--bg-0);
  transition: background-color var(--transition-base), color var(--transition-base);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg-1);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--highlight);
}