/* Theme CSS Variables */
:root {

  /* Brand */
  --cta-primary: linear-gradient(135deg, #c60000 0%, #940000 100%);
  --cta-secondary: linear-gradient(135deg, #333333 0%, #1f1f1f 100%);
  --hero-overlay: linear-gradient(135deg, rgba(198,0,0,.9) 0%, rgba(31,31,31,.85) 100%);

  /* Charts */
  --chart-1: 215 85% 55%;
  --chart-2: 200 75% 45%;
  --chart-3: 180 65% 50%;
  --chart-4: 45 85% 60%;
  --chart-5: 280 70% 65%;

  /* Colors */
  --accent: 0 100% 96%;
  --accent-foreground: 0 100% 30%;
  --background: 0 0% 100%;
  --border: 0 0% 84%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 12%;
  --destructive: 347 30% 43%;
  --destructive-foreground: 0 0% 100%;
  --foreground: 0 0% 12%;
  --input: 0 0% 78%;
  --muted: 0 0% 96%;
  --muted-foreground: 0 0% 38%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 12%;
  --primary: 0 100% 38.82%;
  --primary-foreground: 0 0% 100%;
  --ring: 0 100% 38.82%;
  --secondary: 0 0% 16%;
  --secondary-foreground: 0 0% 100%;

  /* Effects */
  --glass-effect: backdrop-blur-sm bg-white/85 border border-gray-200/30;

  /* Forms */
  --form-option-text: hsl(220, 25%, 15%);
  --form-radio-accent: 0 100% 38.82%;

  /* Quiz */
  --quiz-answer-accent: 0 100% 38.82%;
  --quiz-background: hsl(215, 25%, 98%);
  --quiz-retake-gradient: linear-gradient(135deg, hsl(215, 20%, 60%) 0%, hsl(215, 20%, 55%) 100%);
  --quiz-review-gradient: linear-gradient(135deg, #333333 0%, #1f1f1f 100%);
  --quiz-secondary: hsl(220, 20%, 25%);
  --quiz-start-gradient: linear-gradient(135deg, #c60000 0%, #940000 100%);
  --quiz-submit-gradient: linear-gradient(135deg, #c60000 0%, #940000 100%);
  --quiz-success-gradient: linear-gradient(135deg, #059669 0%, #047857 100%);
  --quiz-text: hsl(220, 25%, 15%);
  --quiz-warning-gradient: linear-gradient(135deg, hsl(45, 85%, 60%) 0%, hsl(35, 80%, 55%) 100%);

  /* Sidebar */
  --sidebar-accent: 0 0% 18%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-background: 0 0% 10%;
  --sidebar-border: 0 0% 25%;
  --sidebar-foreground: 0 0% 100%;
  --sidebar-primary: 0 100% 38.82%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-ring: 0 100% 38.82%;
}

/* Component Styles */

/* Button Components */
.btn-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: none;
  transition: all 0.2s ease-in-out;
}

.btn-primary:hover {
  background-color: hsl(var(--primary) / 0.9);
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border: none;
}

.btn-destructive {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  border: none;
}


/* Card Components */
.card {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius, 0.5rem);
}

.card-header {
  padding: 1.5rem 1.5rem 0;
}

.card-content {
  padding: 1.5rem;
}

.card-footer {
  padding: 0 1.5rem 1.5rem;
}


/* Navigation Components */
.nav-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.nav-link {
  color: hsl(var(--muted-foreground));
  transition: color 0.2s ease-in-out;
}

.nav-link:hover {
  color: hsl(var(--primary));
}

.nav-link.active {
  color: hsl(var(--primary));
  font-weight: 500;
}

/* Sidebar Styles */
.sidebar {
  background-color: hsl(var(--sidebar-background));
  color: hsl(var(--sidebar-foreground));
  border-right: 1px solid hsl(var(--sidebar-border));
}

.sidebar-nav-item {
  color: hsl(var(--sidebar-foreground));
  transition: background-color 0.2s ease-in-out;
}

.sidebar-nav-item:hover {
  background-color: hsl(var(--sidebar-accent));
}

.sidebar-nav-item.active {
  background-color: hsl(var(--sidebar-primary));
  color: hsl(var(--sidebar-primary-foreground));
}


/* Form Components */
.form-input {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius, 0.375rem);
  transition: border-color 0.2s ease-in-out;
}

.form-input:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.form-label {
  color: hsl(var(--foreground));
  font-weight: 500;
}

.form-error {
  color: hsl(var(--destructive));
  font-size: 0.875rem;
}

.form-radio {
  accent-color: hsl(var(--form-radio-accent, var(--primary)));
}


/* Quiz Components */
.quiz-container {
  background-color: hsl(215, 25%, 98%);
  color: hsl(var(--quiz-text, var(--foreground)));
}

.quiz-start-button {
  background: linear-gradient(135deg, #c60000 0%, #940000 100%);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.quiz-start-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.quiz-submit-button {
  background: linear-gradient(135deg, #333333 0%, #1f1f1f 100%);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
}

.quiz-option {
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--card));
  color: hsl(var(--quiz-text, var(--foreground)));
  transition: all 0.2s ease;
}

.quiz-option:hover {
  border-color: hsl(var(--quiz-answer-accent, var(--primary)));
  background-color: hsl(var(--accent));
}

.quiz-option.selected {
  border-color: hsl(var(--quiz-answer-accent, var(--primary)));
  background-color: hsl(var(--quiz-answer-accent, var(--primary)) / 0.1);
}


/* Utility Classes */
.text-primary {
  color: hsl(var(--primary));
}

.text-secondary {
  color: hsl(var(--secondary));
}

.text-muted {
  color: hsl(var(--muted-foreground));
}

.bg-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.bg-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

.bg-muted {
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

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

.theme-transition {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}


/* Responsive Layout */
@media (min-width: 768px) {
  .sidebar {
    width: 300px;
  }
  
  .main-content {
    margin-left: 300px;
  }
}

.header {
  height: 72px;
}

.main-content {
  min-height: calc(100vh - 72px);
}

/* Theme Animation */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}


:root {
--primary: 0 100% 38.82%;
--primary-foreground: 0 0% 100%;
--secondary: 0 0% 16%;
--secondary-foreground: 0 0% 100%;
--accent: 0 100% 96%;
--accent-foreground: 0 100% 30%;
--background: 0 0% 100%;
--foreground: 0 0% 12%;
--card: 0 0% 100%;
--card-foreground: 0 0% 12%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 12%;
--muted: 0 0% 96%;
--muted-foreground: 0 0% 38%;
--border: 0 0% 84%;
--input: 0 0% 78%;
--ring: 0 100% 38.82%;
--sidebar-background: 0 0% 10%;
--sidebar-foreground: 0 0% 100%;
--sidebar-primary: 0 100% 38.82%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 0 0% 18%;
--sidebar-accent-foreground: 0 0% 100%;
--sidebar-border: 0 0% 25%;
--sidebar-ring: 0 100% 38.82%;
--cta-primary: linear-gradient(135deg, #c60000 0%, #940000 100%);
--cta-secondary: linear-gradient(135deg, #333333 0%, #1f1f1f 100%);
--hero-overlay: linear-gradient(135deg, rgba(198,0,0,.9) 0%, rgba(31,31,31,.85) 100%);
--quiz-start-gradient: linear-gradient(135deg, #c60000 0%, #940000 100%);
--quiz-submit-gradient: linear-gradient(135deg, #c60000 0%, #940000 100%);
--quiz-review-gradient: linear-gradient(135deg, #333333 0%, #1f1f1f 100%);
--quiz-answer-accent: 0 100% 38.82%;
--form-radio-accent: 0 100% 38.82%;
}

/* Vegas-only opt-in brand tokens; removed with this stylesheet. */
:root { --brand-blue-50: 255 245 245;
--brand-blue-100: 255 229 229;
--brand-blue-200: 255 199 199;
--brand-blue-300: 255 155 155;
--brand-blue-400: 246 107 107;
--brand-blue-500: 222 36 36;
--brand-blue-600: 198 0 0;
--brand-blue-700: 167 0 0;
--brand-blue-800: 136 9 9;
--brand-blue-900: 102 13 13;
--brand-blue-950: 56 9 9;
--brand-indigo-50: 255 245 245;
--brand-indigo-100: 255 229 229;
--brand-indigo-200: 255 199 199;
--brand-indigo-300: 255 155 155;
--brand-indigo-400: 246 107 107;
--brand-indigo-500: 222 36 36;
--brand-indigo-600: 198 0 0;
--brand-indigo-700: 167 0 0;
--brand-indigo-800: 136 9 9;
--brand-indigo-900: 102 13 13;
--brand-indigo-950: 56 9 9;
--brand-purple-50: 250 250 250;
--brand-purple-100: 245 245 245;
--brand-purple-200: 229 229 229;
--brand-purple-300: 212 212 212;
--brand-purple-400: 163 163 163;
--brand-purple-500: 115 115 115;
--brand-purple-600: 82 82 82;
--brand-purple-700: 64 64 64;
--brand-purple-800: 48 48 48;
--brand-purple-900: 36 36 36;
--brand-purple-950: 23 23 23;
--brand-teal-50: 250 250 250;
--brand-teal-100: 245 245 245;
--brand-teal-200: 229 229 229;
--brand-teal-300: 212 212 212;
--brand-teal-400: 163 163 163;
--brand-teal-500: 115 115 115;
--brand-teal-600: 82 82 82;
--brand-teal-700: 64 64 64;
--brand-teal-800: 48 48 48;
--brand-teal-900: 36 36 36;
--brand-teal-950: 23 23 23;
--brand-cyan-50: 250 250 250;
--brand-cyan-100: 245 245 245;
--brand-cyan-200: 229 229 229;
--brand-cyan-300: 212 212 212;
--brand-cyan-400: 163 163 163;
--brand-cyan-500: 115 115 115;
--brand-cyan-600: 82 82 82;
--brand-cyan-700: 64 64 64;
--brand-cyan-800: 48 48 48;
--brand-cyan-900: 36 36 36;
--brand-cyan-950: 23 23 23;
  --brand-primary-hsl: 0 100% 38.82%;
  --brand-primary-variant-hsl: 0 100% 32.75%;
  --brand-secondary-hsl: 0 0% 16%;
  --brand-secondary-variant-hsl: 0 0% 45%;
  --brand-ring-hsl: 0 100% 38.82%;
  --secondary-foreground: 0 0% 100%;
}
.dark {
  --background: 0 0% 8%; --foreground: 0 0% 95%;
  --card: 0 0% 11%; --card-foreground: 0 0% 95%;
  --popover: 0 0% 11%; --popover-foreground: 0 0% 95%;
  --muted: 0 0% 18%; --muted-foreground: 0 0% 72%;
  --accent: 0 0% 20%; --accent-foreground: 0 0% 95%;
  --border: 0 0% 28%; --input: 0 0% 32%;
  --brand-ring-hsl: 0 85% 72%;
}
.dark .text-primary, .dark .text-brand-blue-600, .dark .text-brand-indigo-600 {
  color: #f5a3a3;
}