/* Multi-Theme Design System */

/* Base theme variables */
:root {
  /* Default theme */
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
  
  /* Brand colors */
  --brand-primary: 222.2 47.4% 11.2%;
  --brand-secondary: 210 40% 96.1%;
  --brand-accent: 210 40% 96.1%;
  
  /* Semantic colors */
  --success: 142.1 76.2% 36.3%;
  --warning: 47.9 95.8% 53.1%;
  --error: 0 84.2% 60.2%;
  --info: 199.89 89.55% 48.04%;
  
  /* Component-specific */
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 222.2 84% 4.9%;
  --sidebar-border: 214.3 31.8% 91.4%;
  --modal-backdrop: 222.2 84% 4.9% / 0.8;
  --dropdown-background: 0 0% 100%;
  --table-header: 210 40% 96.1%;
  --code-background: 210 40% 96.1%;
  
  /* Gradients */
  --gradient-primary: linear-gradient(135deg, hsl(222.2 47.4% 11.2%), hsl(222.2 47.4% 21.2%));
  --gradient-secondary: linear-gradient(135deg, hsl(210 40% 96.1%), hsl(210 40% 93.1%));
  --gradient-brand: linear-gradient(135deg, hsl(222.2 47.4% 11.2%), hsl(222.2 47.4% 21.2%));
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 hsl(222.2 47.4% 11.2% / 0.05);
  --shadow-md: 0 4px 6px -1px hsl(222.2 47.4% 11.2% / 0.1);
  --shadow-lg: 0 10px 15px -3px hsl(222.2 47.4% 11.2% / 0.1);
  --shadow-xl: 0 20px 25px -5px hsl(222.2 47.4% 11.2% / 0.1);
  
  /* Transitions */
  --transition-colors: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  --transition-transform: transform 0.15s ease-in-out;
  --transition-all: all 0.15s ease-in-out;
  
  /* Font */
  --font-family: 'Inter', sans-serif;
}

/* Dark mode */
.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 212.7 26.8% 83.9%;
  
  --sidebar-background: 217.2 32.6% 17.5%;
  --sidebar-foreground: 210 40% 98%;
  --sidebar-border: 217.2 32.6% 17.5%;
  --modal-backdrop: 222.2 84% 4.9% / 0.8;
  --dropdown-background: 222.2 84% 4.9%;
  --table-header: 217.2 32.6% 17.5%;
  --code-background: 217.2 32.6% 17.5%;
}

/* Airbnb Theme */
[data-theme="airbnb"] {
  --primary: 0 82% 60%;
  --primary-foreground: 0 0% 100%;
  --brand-primary: 0 82% 60%;
  --brand-secondary: 0 82% 95%;
  --brand-accent: 0 82% 70%;
  --accent: 0 82% 95%;
  --accent-foreground: 0 82% 20%;
  --radius: 0.75rem;
  --gradient-primary: linear-gradient(135deg, hsl(0 82% 60%), hsl(0 82% 50%));
  --gradient-brand: linear-gradient(135deg, hsl(0 82% 60%), hsl(0 82% 70%));
}

[data-theme="airbnb"].dark {
  --primary: 0 82% 60%;
  --primary-foreground: 0 0% 100%;
  --brand-primary: 0 82% 60%;
  --brand-secondary: 0 82% 15%;
  --brand-accent: 0 82% 70%;
  --accent: 0 82% 15%;
  --accent-foreground: 0 82% 90%;
}

/* Slack Theme */
[data-theme="slack"] {
  --primary: 262 83% 58%;
  --primary-foreground: 0 0% 100%;
  --brand-primary: 262 83% 58%;
  --brand-secondary: 262 83% 95%;
  --brand-accent: 262 83% 70%;
  --accent: 262 83% 95%;
  --accent-foreground: 262 83% 20%;
  --radius: 1rem;
  --gradient-primary: linear-gradient(135deg, hsl(262 83% 58%), hsl(262 83% 48%));
  --gradient-brand: linear-gradient(135deg, hsl(262 83% 58%), hsl(262 83% 70%));
}

[data-theme="slack"].dark {
  --primary: 262 83% 58%;
  --primary-foreground: 0 0% 100%;
  --brand-primary: 262 83% 58%;
  --brand-secondary: 262 83% 15%;
  --brand-accent: 262 83% 70%;
  --accent: 262 83% 15%;
  --accent-foreground: 262 83% 90%;
}

/* GitHub Theme */
[data-theme="github"] {
  --primary: 210 12% 16%;
  --primary-foreground: 0 0% 100%;
  --brand-primary: 210 12% 16%;
  --brand-secondary: 210 12% 96%;
  --brand-accent: 210 12% 30%;
  --accent: 210 12% 96%;
  --accent-foreground: 210 12% 16%;
  --radius: 0.375rem;
  --gradient-primary: linear-gradient(135deg, hsl(210 12% 16%), hsl(210 12% 26%));
  --gradient-brand: linear-gradient(135deg, hsl(210 12% 16%), hsl(210 12% 30%));
}

[data-theme="github"].dark {
  --background: 220 13% 9%;
  --foreground: 220 14% 96%;
  --card: 220 13% 9%;
  --card-foreground: 220 14% 96%;
  --primary: 220 14% 96%;
  --primary-foreground: 220 13% 9%;
  --brand-primary: 220 14% 96%;
  --brand-secondary: 215 28% 17%;
  --brand-accent: 220 14% 80%;
  --accent: 215 28% 17%;
  --accent-foreground: 220 14% 96%;
}

/* Spotify Theme */
[data-theme="spotify"] {
  --background: 0 0% 7%;
  --foreground: 0 0% 100%;
  --card: 0 0% 7%;
  --card-foreground: 0 0% 100%;
  --primary: 141 76% 48%;
  --primary-foreground: 0 0% 0%;
  --brand-primary: 141 76% 48%;
  --brand-secondary: 0 0% 15%;
  --brand-accent: 141 76% 60%;
  --accent: 0 0% 15%;
  --accent-foreground: 0 0% 100%;
  --secondary: 0 0% 15%;
  --secondary-foreground: 0 0% 100%;
  --muted: 0 0% 15%;
  --muted-foreground: 0 0% 70%;
  --border: 0 0% 20%;
  --input: 0 0% 20%;
  --radius: 0.5rem;
  --gradient-primary: linear-gradient(135deg, hsl(141 76% 48%), hsl(141 76% 38%));
  --gradient-brand: linear-gradient(135deg, hsl(141 76% 48%), hsl(141 76% 60%));
}

[data-theme="spotify"].dark {
  /* Spotify is already dark by default */
  --background: 0 0% 4%;
  --card: 0 0% 4%;
  --secondary: 0 0% 10%;
  --muted: 0 0% 10%;
  --border: 0 0% 15%;
  --input: 0 0% 15%;
}

/* Utility Classes */
.bg-background { background-color: hsl(var(--background)); }
.bg-foreground { background-color: hsl(var(--foreground)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-card-foreground { background-color: hsl(var(--card-foreground)); }
.bg-popover { background-color: hsl(var(--popover)); }
.bg-popover-foreground { background-color: hsl(var(--popover-foreground)); }
.bg-primary { background-color: hsl(var(--primary)); }
.bg-primary-foreground { background-color: hsl(var(--primary-foreground)); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.bg-secondary-foreground { background-color: hsl(var(--secondary-foreground)); }
.bg-muted { background-color: hsl(var(--muted)); }
.bg-muted-foreground { background-color: hsl(var(--muted-foreground)); }
.bg-accent { background-color: hsl(var(--accent)); }
.bg-accent-foreground { background-color: hsl(var(--accent-foreground)); }
.bg-destructive { background-color: hsl(var(--destructive)); }
.bg-destructive-foreground { background-color: hsl(var(--destructive-foreground)); }
.bg-success { background-color: hsl(var(--success)); }
.bg-warning { background-color: hsl(var(--warning)); }
.bg-error { background-color: hsl(var(--error)); }
.bg-info { background-color: hsl(var(--info)); }

.text-background { color: hsl(var(--background)); }
.text-foreground { color: hsl(var(--foreground)); }
.text-card { color: hsl(var(--card)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }
.text-popover { color: hsl(var(--popover)); }
.text-popover-foreground { color: hsl(var(--popover-foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-secondary { color: hsl(var(--secondary)); }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
.text-muted { color: hsl(var(--muted)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-accent { color: hsl(var(--accent)); }
.text-accent-foreground { color: hsl(var(--accent-foreground)); }
.text-destructive { color: hsl(var(--destructive)); }
.text-destructive-foreground { color: hsl(var(--destructive-foreground)); }
.text-brand-primary { color: hsl(var(--brand-primary)); }
.text-brand-secondary { color: hsl(var(--brand-secondary)); }
.text-brand-accent { color: hsl(var(--brand-accent)); }
.text-success { color: hsl(var(--success)); }
.text-warning { color: hsl(var(--warning)); }
.text-error { color: hsl(var(--error)); }
.text-info { color: hsl(var(--info)); }

.border-border { border-color: hsl(var(--border)); }
.border-input { border-color: hsl(var(--input)); }

.ring-ring { --tw-ring-color: hsl(var(--ring)); }
.ring-offset-background { --tw-ring-offset-color: hsl(var(--background)); }
.ring-offset-card { --tw-ring-offset-color: hsl(var(--card)); }

.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-secondary { background: var(--gradient-secondary); }
.bg-gradient-brand { background: var(--gradient-brand); }

.shadow-themed-sm { box-shadow: var(--shadow-sm); }
.shadow-themed-md { box-shadow: var(--shadow-md); }
.shadow-themed-lg { box-shadow: var(--shadow-lg); }
.shadow-themed-xl { box-shadow: var(--shadow-xl); }

.rounded-themed { border-radius: calc(var(--radius)); }
.rounded-themed-lg { border-radius: calc(var(--radius) * 1.5); }
.rounded-themed-xl { border-radius: calc(var(--radius) * 2); }

.transition-colors { transition: var(--transition-colors); }
.transition-transform { transition: var(--transition-transform); }
.transition-all { transition: var(--transition-all); }

.font-inter { font-family: var(--font-family); }

/* Component Classes */
.themed-button {
  @apply bg-primary text-primary-foreground hover:bg-primary/90 px-4 py-2 rounded-themed transition-all duration-200 font-medium shadow-themed-sm hover:shadow-themed-md;
}

.themed-card {
  @apply bg-card text-card-foreground border border-border rounded-themed shadow-themed-sm;
}

.themed-input {
  @apply bg-background border-input text-foreground placeholder:text-muted-foreground rounded-themed transition-colors duration-200;
}

.themed-modal {
  @apply bg-card text-card-foreground border border-border rounded-themed-xl shadow-themed-xl;
}

.themed-dropdown {
  @apply bg-popover text-popover-foreground border border-border rounded-themed shadow-themed-lg z-50;
}

.themed-sidebar {
  @apply bg-card text-card-foreground border-r border-border;
}

.themed-table-header {
  @apply bg-muted text-muted-foreground;
}

.themed-code {
  @apply bg-muted text-foreground font-mono text-sm px-2 py-1 rounded-themed;
}

.interactive-hover {
  @apply transition-all duration-200 hover:scale-105 hover:shadow-themed-lg;
}

.focus-themed {
  @apply focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background;
}