/* LineBuster Base Design System & Responsive Tokens */
:root {
  /* Color Palette - Vibrant Dark Mode */
  --bg-dark: #0d1117;
  --bg-card: #161b22;
  --bg-card-hover: #21262d;
  --bg-glass: rgba(22, 27, 34, 0.85);
  
  --primary: #ff6b00;
  --primary-hover: #ff8533;
  --primary-glow: rgba(255, 107, 0, 0.25);
  
  --accent-blue: #2f81f7;
  --accent-green: #238636;
  --accent-yellow: #d29922;
  --accent-red: #da3633;
  --accent-purple: #8957e5;
  
  --text-main: #f0f6fc;
  --text-muted: #8b949e;
  --text-inverse: #0d1117;
  
  --border-color: #30363d;
  --border-light: rgba(240, 246, 252, 0.1);
  
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 9999px;
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-orange: 0 0 24px rgba(255, 107, 0, 0.35);
  
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* E-Ink High Contrast Pure Mode (Hardware E-Paper Displays) */
body.eink-mode {
  --bg-dark: #ffffff !important;
  --bg-card: #ffffff !important;
  --bg-card-hover: #f0f0f0 !important;
  --bg-glass: #ffffff !important;
  
  --primary: #000000 !important;
  --primary-hover: #333333 !important;
  --primary-glow: none !important;
  
  --accent-blue: #000000 !important;
  --accent-green: #000000 !important;
  --accent-yellow: #000000 !important;
  --accent-red: #000000 !important;
  --accent-purple: #000000 !important;
  
  --text-main: #000000 !important;
  --text-muted: #333333 !important;
  --text-inverse: #ffffff !important;
  
  --border-color: #000000 !important;
  --border-light: #000000 !important;
  
  --shadow-sm: none !important;
  --shadow-lg: none !important;
  --shadow-orange: none !important;
}

body.eink-mode * {
  box-shadow: none !important;
  text-shadow: none !important;
  transition: none !important;
  animation: none !important;
}

/* High-Contrast Outdoor Daylight Light Mode (Ideal for Sunny Outdoor Food Trucks) */
body.light-theme {
  --bg-dark: #f8fafc !important;
  --bg-card: #ffffff !important;
  --bg-card-hover: #f1f5f9 !important;
  --bg-glass: rgba(255, 255, 255, 0.92) !important;
  
  --primary: #e65100 !important; /* Deep rich orange for maximum sunlight visibility */
  --primary-hover: #f57c00 !important;
  --primary-glow: rgba(230, 81, 0, 0.25) !important;
  
  --accent-blue: #0284c7 !important;
  --accent-green: #15803d !important;
  --accent-yellow: #b45309 !important;
  --accent-red: #b91c1c !important;
  --accent-purple: #7e22ce !important;
  
  --text-main: #0f172a !important; /* Crisp dark slate for maximum readability in direct sun */
  --text-muted: #475569 !important;
  --text-inverse: #ffffff !important;
  
  --border-color: #cbd5e1 !important;
  --border-light: rgba(15, 23, 42, 0.12) !important;
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12) !important;
  --shadow-orange: 0 0 24px rgba(230, 81, 0, 0.25) !important;
}

/* Vibrant Nebula Theme */
body.vibrant-theme {
  --bg-dark: #18092e !important;
  --bg-card: #28124a !important;
  --bg-card-hover: #371863 !important;
  --bg-glass: rgba(40, 18, 74, 0.9) !important;
  
  --primary: #f43f5e !important;
  --primary-hover: #fb7185 !important;
  --primary-glow: rgba(244, 63, 94, 0.3) !important;
  
  --accent-blue: #38bdf8 !important;
  --accent-green: #34d399 !important;
  --accent-yellow: #fbbf24 !important;
  --accent-red: #f87171 !important;
  --accent-purple: #c084fc !important;
  
  --text-main: #f8fafc !important;
  --text-muted: #cbd5e1 !important;
  --text-inverse: #18092e !important;
  
  --border-color: #4c1d95 !important;
  --border-light: rgba(255, 255, 255, 0.15) !important;
  
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6) !important;
  --shadow-orange: 0 0 24px rgba(244, 63, 94, 0.35) !important;
}

/* Reset & Locked Viewport (iOS Stabilization) */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  background-color: var(--bg-dark);
  color: var(--text-main);
  font-family: var(--font-family);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  touch-action: none;
}

#app {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
}

.view-container {
  flex: 1;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  display: none !important;
}

.view-container.active {
  display: flex !important;
  flex-direction: column;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-dark);
}
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}