/**
 * Dark Mode Theme Overrides
 * Sophisticated dark palette for investor presentations
 */

[data-theme="dark"] {
  /* ============================================
     DARK MODE BACKGROUND & SURFACES
     ============================================ */

  --color-background: #0D1117;
  --color-surface: #161B22;
  --color-surface-raised: #21262D;
  --color-border: #30363D;
  --color-divider: #21262D;

  /* ============================================
     DARK MODE TEXT COLORS
     ============================================ */

  --color-text-primary: #E6EDF3;
  --color-text-secondary: #B3BDC7;
  --color-text-tertiary: #7D8590;
  --color-text-inverse: #0D1117;

  /* ============================================
     DARK MODE LINKS
     ============================================ */

  --color-link: #60A5FA;
  --color-link-hover: #FFD700;
  --color-link-visited: #93BBFD;

  /* ============================================
     DIMENSION COLORS - Brightened for Dark Mode
     ============================================ */

  /* Time & Effort - Lighter Crimson */
  --color-time-light: #DC2626;
  --color-time-medium: #B91C1C;
  --color-time-dark: #8B0000;
  --color-time-gradient: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);

  /* Skill & Artistry - Brighter Gold */
  --color-skill-light: #FBBF24;
  --color-skill-medium: #F59E0B;
  --color-skill-dark: #DAA520;
  --color-skill-gradient: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
  --color-gold-gradient: linear-gradient(135deg, var(--color-gold-medium) 0%, var(--color-gold-light) 100%);

  /* Complexity & Detail - Brighter Violet */
  --color-complexity-light: #A78BFA;
  --color-complexity-medium: #7C3AED;
  --color-complexity-dark: #4B0082;
  --color-complexity-gradient: linear-gradient(135deg, #A78BFA 0%, #7C3AED 100%);

  /* ============================================
     DARK MODE SHADOWS (Subtle)
     ============================================ */

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4),
               0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5),
               0 4px 6px -2px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6),
               0 10px 10px -5px rgba(0, 0, 0, 0.5);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);

  /* Enhanced gold glow for dark mode */
  --shadow-gold: 0 0 25px rgba(255, 215, 0, 0.4);
  --shadow-gold-strong: 0 0 40px rgba(255, 215, 0, 0.6);
}

/* ============================================
   THEME TOGGLE STYLES
   ============================================ */

.theme-toggle {
  position: relative;
  width: 60px;
  height: 30px;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-base);
}

.theme-toggle:hover {
  border-color: var(--color-gold-medium);
  box-shadow: var(--shadow-gold);
}

.theme-toggle-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, var(--color-gold-medium), var(--color-gold-light));
  border-radius: var(--radius-full);
  transition: transform var(--transition-base);
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .theme-toggle-slider {
  transform: translateX(30px);
  background: linear-gradient(135deg, #93C5FD, #60A5FA);
}

.theme-toggle-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-sm);
}

.theme-toggle-icon-sun {
  left: 8px;
  color: var(--color-gold-dark);
}

.theme-toggle-icon-moon {
  right: 8px;
  color: var(--color-info-medium);
}

[data-theme="dark"] .theme-toggle-icon-sun {
  color: var(--color-text-tertiary);
}

[data-theme="dark"] .theme-toggle-icon-moon {
  color: #60A5FA;
}

/* ============================================
   AUTOMATIC CONTRAST ADJUSTMENTS
   ============================================ */

/* Ensure charts and visualizations adapt */
[data-theme="dark"] .plot-container,
[data-theme="dark"] .chart-wrapper {
  background: var(--color-surface-raised);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* Adjust code blocks for dark mode */
[data-theme="dark"] pre,
[data-theme="dark"] code {
  background: var(--color-surface-raised);
  border-color: var(--color-border);
}

/* Tables in dark mode */
[data-theme="dark"] table {
  border-color: var(--color-border);
}

[data-theme="dark"] thead {
  background: var(--color-surface-raised);
}

[data-theme="dark"] tbody tr:hover {
  background: var(--color-surface);
}

/* Callouts in dark mode get subtle background adjustment */
[data-theme="dark"] .callout {
  background: var(--color-surface-raised);
  border-color: currentColor;
}

/* Metric cards in dark mode */
[data-theme="dark"] .metric-card {
  background: var(--color-surface-raised);
  border-color: var(--color-border);
}

[data-theme="dark"] .metric-card:hover {
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

/* Hero section in dark mode */
[data-theme="dark"] .hero-section {
  background: linear-gradient(180deg,
    var(--color-background) 0%,
    var(--color-surface) 50%,
    var(--color-background) 100%
  );
}

/* Navbar in dark mode */
[data-theme="dark"] .navbar {
  background: var(--color-surface-raised);
  border-bottom-color: var(--color-border);
}

/* Sidebar in dark mode */
[data-theme="dark"] .sidebar {
  background: var(--color-surface);
  border-right-color: var(--color-border);
}

/* Footer in dark mode */
[data-theme="dark"] footer {
  background: var(--color-surface-raised);
  border-top-color: var(--color-border);
}