/* Dark Theme - Tap Macro */
[data-theme="dark"] {
  /* Primary Colors */
  --primary: #F97316;
  --primary-foreground: #FFFFFF;
  
  /* Secondary Colors */
  --secondary: #57534E;
  --secondary-foreground: #E7E5E4;
  
  /* Accent Colors */
  --accent: #1e4252;
  --accent-foreground: #E7E5E4;
  
  /* Base Colors */
  --background: #1C1917;
  --foreground: #F5F5F4;
  
  /* Card Colors */
  --card: #292524;
  --card-foreground: #F5F5F4;
  
  /* Popover Colors */
  --popover: #292524;
  --popover-foreground: #F5F5F4;
  
  /* Border Colors */
  --border: #44403C;
  --input: #44403C;
  
  /* Ring Colors */
  --ring: #F97316;
  --primary-alpha: rgba(249, 115, 22, 0.1);
  
  /* Muted Colors */
  --muted: #44403C;
  --muted-foreground: #A8A29E;
  
  /* Destructive Colors */
  --destructive: #EF4444;
  --destructive-foreground: #FEF2F2;
  
  /* Success Colors */
  --success: #10B981;
  --success-foreground: #F0FDF4;
  
  /* Warning Colors */
  --warning: #F59E0B;
  --warning-foreground: #FFFBEB;
  
  /* Info Colors */
  --info: #3B82F6;
  --info-foreground: #EFF6FF;
  
  /* Additional Colors for Components */
  --bg-card: var(--card);
  --bg-secondary: var(--accent);
  --bg-input: var(--input);
  --bg-hover: #44403C;
  --text-primary: var(--foreground);
  --text-secondary: var(--muted-foreground);
  --border-radius: 8px;

  /* Vertical compression: spacing levers (match light theme) */
  --space-card: 1.25rem;
  --space-content: 1.5rem;
  --space-form-group: 0.75rem;
  --space-section: 1.25rem;
  --space-block: 0.75rem;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);

  /* Surface and state variants for dark mode */
  --surface: #23201e;
  --surface-elevated: #2b2725;
  --surface-hover: #36312e;
  --surface-variant: #24211f;
  --surface-card-header: var(--surface-variant);

  /* Button and quick-access tokens */
  --btn-bg: var(--surface);
  --btn-hover-bg: var(--surface-hover);
  --text-color: var(--foreground);
  --border-color: var(--border);
  --primary-color: var(--primary);
  --primary-text: var(--primary-foreground);
  --primary-hover: #EA580C;

  /* Darker state colors */
  --secondary-dark: #3f3b36;
  --success-dark: #0ea370;
  --destructive-dark: #b91c1c;

  /* Alpha overlays */
  --secondary-alpha: rgba(87, 83, 78, 0.25);
  --info-alpha: rgba(59, 130, 246, 0.15);

  /* Tertiary background */
  --bg-tertiary: #1f1c1a;
}

/* Dark Theme Specific Styles */
[data-theme="dark"] {
  background-color: var(--background);
  color: var(--foreground);
}

[data-theme="dark"] .card {
  background-color: var(--card);
  border: 1px solid var(--border);
  color: var(--card-foreground);
}

[data-theme="dark"] .btn-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border: 1px solid var(--primary);
}

[data-theme="dark"] .btn-primary:hover {
  background-color: #EA580C;
  border-color: #EA580C;
}

[data-theme="dark"] .btn-secondary {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  border: 1px solid var(--secondary);
}

[data-theme="dark"] .btn-secondary:hover {
  background-color: #44403C;
  border-color: #44403C;
}

[data-theme="dark"] .input {
  background-color: var(--input);
  border: 1px solid var(--border);
  color: var(--foreground);
}

[data-theme="dark"] .input:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2);
}

[data-theme="dark"] .sidebar {
  background-color: var(--card);
  border-right: 1px solid var(--border);
}

[data-theme="dark"] .header {
  background-color: var(--card);
  border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .material-card {
  background-color: var(--card);
  border: 1px solid var(--border);
  transition: all 0.2s ease;
}

[data-theme="dark"] .material-card:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 12px rgba(249, 115, 22, 0.15);
}

[data-theme="dark"] .calculator-result {
  background-color: var(--accent);
  color: var(--accent-foreground);
  border: 1px solid var(--border);
}

[data-theme="dark"] .theme-toggle {
  background-color: var(--secondary);
  color: var(--secondary-foreground);
  border: 1px solid var(--border);
}

[data-theme="dark"] .theme-toggle:hover {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

/* Remove white text-shadow on risk engagement so white text stays sharp */
[data-theme="dark"] .engagement-text {
  text-shadow: none;
}