/**
 * Homepage Dark Mode Fixes
 * Page-specific component overrides for elements with hardcoded colors.
 * General dark mode variables and base element colors are handled by dark-mode.css.
 */

/* System preference dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Stats grid cards — hardcoded backgrounds in home.css */
    .aiab-stats-grid .aiab-stat-card {
      background: var(--color-surface-elevated, #2c2c2e);
      border: 1px solid var(--color-border, #3a3a3c);
    }

    .aiab-stat-card__icon {
      color: var(--color-primary-hover);
      opacity: 1;
    }

    .aiab-stat-card__icon svg {
      stroke: var(--color-primary-hover);
    }

    /* Feature boxes — hardcoded backgrounds in home.css */
    .aiab-feature-box,
    .aiab-key-features-grid .aiab-feature-box {
      background: var(--color-surface-elevated, #2c2c2e);
      border: 1px solid var(--color-border, #3a3a3c);
    }

    /* Component cards — hardcoded backgrounds */
    .aiab-component-card {
      background: var(--color-surface-elevated, #2c2c2e);
      border: 1px solid var(--color-border, #3a3a3c);
    }

    /* Feature cards */
    .aiab-feature-card {
      background: var(--color-surface-elevated, #2c2c2e);
      border-color: var(--color-border, #3a3a3c);
    }

    /* Demo section borders */
    .aiab-demo-section {
      border-bottom-color: var(--color-border, #3a3a3c);
    }

    .aiab-feature-grid {
      background: var(--color-surface-elevated, #2c2c2e);
    }

    /* Navigation site-specific overrides */
    .aiab-site-nav {
      background: var(--color-surface, #1c1c1e);
      border-bottom: 1px solid var(--color-border, #3a3a3c);
    }

    .aiab-site-nav a:hover {
      color: var(--color-primary-hover);
    }

    /* Alerts — hardcoded backgrounds */
    .aiab-alert-success {
      background: rgba(48, 209, 88, 0.1);
      color: var(--apple-success, #30d158);
      border-color: rgba(48, 209, 88, 0.3);
    }

    .aiab-alert-info {
      background: rgba(10, 132, 255, 0.1);
      color: var(--apple-info, #0a84ff);
      border-color: rgba(10, 132, 255, 0.3);
    }

    .aiab-alert-warning {
      background: rgba(255, 214, 10, 0.1);
      color: var(--apple-warning, #ffd60a);
      border-color: rgba(255, 214, 10, 0.3);
    }

    .aiab-alert-danger {
      background: rgba(255, 69, 58, 0.1);
      color: var(--apple-danger, #ff453a);
      border-color: rgba(255, 69, 58, 0.3);
    }
  }
}

/* Manual dark mode — same overrides */
[data-theme="dark"] {
  .aiab-stats-grid .aiab-stat-card {
    background: var(--color-surface-elevated, #2c2c2e);
    border: 1px solid var(--color-border, #3a3a3c);
  }

  .aiab-stat-card__icon {
    color: var(--color-primary-hover);
    opacity: 1;
  }

  .aiab-stat-card__icon svg {
    stroke: var(--color-primary-hover);
  }

  .aiab-feature-box,
  .aiab-key-features-grid .aiab-feature-box {
    background: var(--color-surface-elevated, #2c2c2e);
    border: 1px solid var(--color-border, #3a3a3c);
  }

  .aiab-component-card {
    background: var(--color-surface-elevated, #2c2c2e);
    border: 1px solid var(--color-border, #3a3a3c);
  }

  .aiab-feature-card {
    background: var(--color-surface-elevated, #2c2c2e);
    border-color: var(--color-border, #3a3a3c);
  }

  .aiab-demo-section {
    border-bottom-color: var(--color-border, #3a3a3c);
  }

  .aiab-feature-grid {
    background: var(--color-surface-elevated, #2c2c2e);
  }

  .aiab-site-nav {
    background: var(--color-surface, #1c1c1e);
    border-bottom: 1px solid var(--color-border, #3a3a3c);
  }

  .aiab-site-nav a:hover {
    color: var(--color-primary-hover);
  }

  .aiab-alert-success {
    background: rgba(48, 209, 88, 0.1);
    color: var(--apple-success, #30d158);
    border-color: rgba(48, 209, 88, 0.3);
  }

  .aiab-alert-info {
    background: rgba(10, 132, 255, 0.1);
    color: var(--apple-info, #0a84ff);
    border-color: rgba(10, 132, 255, 0.3);
  }

  .aiab-alert-warning {
    background: rgba(255, 214, 10, 0.1);
    color: var(--apple-warning, #ffd60a);
    border-color: rgba(255, 214, 10, 0.3);
  }

  .aiab-alert-danger {
    background: rgba(255, 69, 58, 0.1);
    color: var(--apple-danger, #ff453a);
    border-color: rgba(255, 69, 58, 0.3);
  }
}