/* Base theme variables */
:root {
  --transition-colors: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light Theme */
.light {
  --color-background: 255 255 255;
  --color-foreground: 15 23 42;
  --color-muted: 100 116 139;
  --color-muted-foreground: 148 163 184;
  --color-surface: 248 250 252;
  --color-surface-hover: 241 245 249;
  --color-border: 226 232 240;
  --color-input: 248 250 252;
  --color-primary: 59 130 246;
  --color-primary-foreground: 255 255 255;
  --color-secondary: 100 116 139;
  --color-secondary-foreground: 255 255 255;
  --color-accent: 16 185 129;
  --color-accent-foreground: 255 255 255;
  --color-destructive: 239 68 68;
  --color-destructive-foreground: 255 255 255;
  --color-warning: 245 158 11;
  --color-warning-foreground: 255 255 255;
  --color-success: 34 197 94;
  --color-success-foreground: 255 255 255;
}

/* Dark Theme */
.dark {
  --color-background: 15 23 42;
  --color-foreground: 248 250 252;
  --color-muted: 100 116 139;
  --color-muted-foreground: 148 163 184;
  --color-surface: 30 41 59;
  --color-surface-hover: 51 65 85;
  --color-border: 71 85 105;
  --color-input: 30 41 59;
  --color-primary: 96 165 250;
  --color-primary-foreground: 15 23 42;
  --color-secondary: 148 163 184;
  --color-secondary-foreground: 15 23 42;
  --color-accent: 52 211 153;
  --color-accent-foreground: 15 23 42;
  --color-destructive: 248 113 113;
  --color-destructive-foreground: 15 23 42;
  --color-warning: 251 191 36;
  --color-warning-foreground: 15 23 42;
  --color-success: 74 222 128;
  --color-success-foreground: 15 23 42;
}

/* Ocean Theme */
.ocean {
  --color-background: 12 74 110;
  --color-foreground: 240 249 255;
  --color-muted: 56 189 248;
  --color-muted-foreground: 186 230 253;
  --color-surface: 7 89 133;
  --color-surface-hover: 2 132 199;
  --color-border: 14 165 233;
  --color-input: 7 89 133;
  --color-primary: 34 211 238;
  --color-primary-foreground: 12 74 110;
  --color-secondary: 125 211 252;
  --color-secondary-foreground: 12 74 110;
  --color-accent: 6 182 212;
  --color-accent-foreground: 12 74 110;
  --color-destructive: 244 63 94;
  --color-destructive-foreground: 240 249 255;
  --color-warning: 251 191 36;
  --color-warning-foreground: 12 74 110;
  --color-success: 52 211 153;
  --color-success-foreground: 12 74 110;
}

/* Sunset Theme */
.sunset {
  --color-background: 154 52 18;
  --color-foreground: 255 251 235;
  --color-muted: 251 146 60;
  --color-muted-foreground: 254 215 170;
  --color-surface: 194 65 12;
  --color-surface-hover: 234 88 12;
  --color-border: 249 115 22;
  --color-input: 194 65 12;
  --color-primary: 251 191 36;
  --color-primary-foreground: 154 52 18;
  --color-secondary: 254 215 170;
  --color-secondary-foreground: 154 52 18;
  --color-accent: 245 158 11;
  --color-accent-foreground: 154 52 18;
  --color-destructive: 239 68 68;
  --color-destructive-foreground: 255 251 235;
  --color-warning: 251 146 60;
  --color-warning-foreground: 154 52 18;
  --color-success: 34 197 94;
  --color-success-foreground: 154 52 18;
}

/* Forest Theme */
.forest {
  --color-background: 20 83 45;
  --color-foreground: 240 253 244;
  --color-muted: 34 197 94;
  --color-muted-foreground: 187 247 208;
  --color-surface: 22 101 52;
  --color-surface-hover: 21 128 61;
  --color-border: 34 197 94;
  --color-input: 22 101 52;
  --color-primary: 74 222 128;
  --color-primary-foreground: 20 83 45;
  --color-secondary: 187 247 208;
  --color-secondary-foreground: 20 83 45;
  --color-accent: 52 211 153;
  --color-accent-foreground: 20 83 45;
  --color-destructive: 239 68 68;
  --color-destructive-foreground: 240 253 244;
  --color-warning: 245 158 11;
  --color-warning-foreground: 20 83 45;
  --color-success: 34 197 94;
  --color-success-foreground: 20 83 45;
}

/* Lavender Theme */
.lavender {
  --color-background: 88 28 135;
  --color-foreground: 250 245 255;
  --color-muted: 168 85 247;
  --color-muted-foreground: 221 214 254;
  --color-surface: 107 33 168;
  --color-surface-hover: 126 34 206;
  --color-border: 147 51 234;
  --color-input: 107 33 168;
  --color-primary: 196 181 253;
  --color-primary-foreground: 88 28 135;
  --color-secondary: 221 214 254;
  --color-secondary-foreground: 88 28 135;
  --color-accent: 168 85 247;
  --color-accent-foreground: 88 28 135;
  --color-destructive: 244 63 94;
  --color-destructive-foreground: 250 245 255;
  --color-warning: 251 191 36;
  --color-warning-foreground: 88 28 135;
  --color-success: 34 197 94;
  --color-success-foreground: 88 28 135;
}

/* Midnight Theme */
.midnight {
  --color-background: 30 27 75;
  --color-foreground: 238 242 255;
  --color-muted: 129 140 248;
  --color-muted-foreground: 199 210 254;
  --color-surface: 49 46 129;
  --color-surface-hover: 67 56 202;
  --color-border: 99 102 241;
  --color-input: 49 46 129;
  --color-primary: 165 180 252;
  --color-primary-foreground: 30 27 75;
  --color-secondary: 199 210 254;
  --color-secondary-foreground: 30 27 75;
  --color-accent: 129 140 248;
  --color-accent-foreground: 30 27 75;
  --color-destructive: 248 113 113;
  --color-destructive-foreground: 238 242 255;
  --color-warning: 251 191 36;
  --color-warning-foreground: 30 27 75;
  --color-success: 74 222 128;
  --color-success-foreground: 30 27 75;
}

/* Global transitions */
* {
  transition: var(--transition-colors);
}

/* Smooth background transitions */
body {
  background-color: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Meta theme color updates */
meta[name="theme-color"] {
  content: rgb(var(--color-background));
}