:root {
  /* HSL Color System - Apple TV Style Dark Cinematic */
  --bg-primary: hsl(240, 10%, 4%);
  --bg-secondary: hsl(240, 10%, 8%);
  --bg-tertiary: hsl(240, 10%, 12%);
  --bg-glass: hsla(240, 10%, 6%, 0.75);
  
  --text-primary: hsl(0, 0%, 96%);
  --text-secondary: hsl(240, 5%, 65%);
  --text-muted: hsl(240, 5%, 45%);
  
  --accent-color: hsl(0, 0%, 96%); 
  --accent-glow: hsla(0, 0%, 100%, 0.15);
  --error-color: hsl(0, 85%, 60%);
  --error-bg: hsla(0, 85%, 60%, 0.1);
  --success-color: hsl(140, 70%, 50%);
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2.5rem;
  --spacing-xxl: 4rem;

  /* Typography */
  --font-main: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* Borders and Blurs */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --blur-glass: 30px;
  
  /* Shadows */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.7);
  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
  
  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-smooth: 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-spring: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-main);
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

/* Custom premium scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-tertiary);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

a {
  color: inherit;
  text-decoration: none;
}

button, input {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
}

button {
  cursor: pointer;
}

.hidden {
  display: none !important;
}