:root {
  /* Primary Brand Colors */
  --primary: #0066CC;
  --primary-foreground: #FFFFFF;
  --secondary: #FF6B35;
  --secondary-foreground: #FFFFFF;
  
  /* Semantic Colors */
  --background: #F9FAFB;
  --foreground: #111827;
  --card: #FFFFFF;
  --card-foreground: #111827;
  --popover: #FFFFFF;
  --popover-foreground: #111827;
  --muted: #F3F4F6;
  --muted-foreground: #6B7280;
  --accent: #E5E7EB;
  --accent-foreground: #111827;
  --destructive: #EF4444;
  --destructive-foreground: #FFFFFF;
  --success: #10B981;
  --success-foreground: #FFFFFF;
  --warning: #F59E0B;
  --warning-foreground: #111827;
  
  /* UI Elements */
  --border: #E5E7EB;
  --input: #FFFFFF;
  --ring: #0066CC;
  --ring-offset: #FFFFFF;
  
  /* Chart Colors */
  --chart-1: #0066CC;
  --chart-2: #FF6B35;
  --chart-3: #10B981;
  --chart-4: #F59E0B;
  --chart-5: #8B5CF6;
  
  /* Sidebar */
  --sidebar: #FFFFFF;
  --sidebar-foreground: #111827;
  --sidebar-primary: #0066CC;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #F3F4F6;
  --sidebar-accent-foreground: #111827;
  --sidebar-border: #E5E7EB;
  --sidebar-ring: #0066CC;
  
  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  
  /* Spacing */
  --spacing: 0.25rem;
  
  /* Radius */
  --radius: 0.5rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
}

/* Alpine.js x-cloak - hide elements before initialization */
[x-cloak] { display: none !important; }

/* Additional custom styles for Know Your Price */
.hero-gradient {
    background: linear-gradient(135deg, #0066CC 0%, #004499 100%);
}

.card-hover {
    transition: all var(--transition-normal);
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.search-input {
    transition: all var(--transition-normal);
}

.search-input:focus {
    box-shadow: 0 0 0 3px var(--ring);
    transform: scale(1.02);
}

.vote-button {
    transition: all var(--transition-fast);
}

.vote-button:hover {
    transform: scale(1.1);
}

.vote-button:active {
    transform: scale(0.95);
}

.hot-badge {
    background: linear-gradient(45deg, #FF6B35, #FF8C42);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}