/**
 * Dark Mode Theme for Amphibious 2.0
 *
 * Comprehensive dark mode implementation with Apple-quality polish.
 * Supports both system preference and manual toggle.
 *
 * Architecture:
 * - CSS custom properties swap values for dark mode
 * - Two activation methods: @media (prefers-color-scheme: dark) and [data-theme="dark"]
 * - Component overrides only for hardcoded values (var() references auto-inherit)
 * - Toggle icon states: moon in light mode, sun in dark mode
 */

/* ==========================================================================
   Light Mode Defaults
   ========================================================================== */

:root {
  --color-mode: "light";

  /* Transition for smooth theme switching */
  --theme-transition:
    background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

/* ==========================================================================
   Dark Mode Color System — Variable Overrides
   ========================================================================== */

/* System preference: dark mode when user hasn't explicitly chosen light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-mode: "dark";

    /* Primary brand colors — brighter for dark backgrounds */
    --apple-orange-500: #ff9500;
    --apple-orange-600: #ff8800;
    --apple-orange-700: #ff7700;
    --color-primary: #ff9500;
    --color-primary-hover: #ffaa00;

    /* Gray scale — inverted for dark mode */
    --apple-gray-50: #1c1c1e;
    --apple-gray-100: #2c2c2e;
    --apple-gray-200: #3a3a3c;
    --apple-gray-300: #48484a;
    --apple-gray-400: #636366;
    --apple-gray-500: #8e8e93;
    --apple-gray-600: #aeaeb2;
    --apple-gray-700: #c7c7cc;
    --apple-gray-800: #d1d1d6;
    --apple-gray-900: #e5e5ea;

    /* Surfaces */
    --color-background: #000000;
    --color-surface: #1c1c1e;
    --color-surface-elevated: #2c2c2e;
    --color-surface-overlay: #3a3a3c;

    /* Text */
    --color-text: #ffffff;
    --color-text-secondary: #aeaeb2;
    --color-text-tertiary: #8e8e93;
    --color-text-quaternary: #636366;
    --color-text-disabled: #48484a;

    /* Borders */
    --color-border: #3a3a3c;
    --color-border-light: #2c2c2e;
    --color-border-strong: #48484a;

    /* Status colors */
    --apple-success: #30d158;
    --apple-warning: #ffd60a;
    --apple-danger: #ff453a;
    --apple-info: #0a84ff;

    /* Component tokens */
    --card-background: var(--color-surface);
    --card-border: var(--color-border);
    --input-background: var(--color-surface);
    --input-border: var(--color-border);
    --button-background: var(--color-surface-elevated);
    --button-border: var(--color-border-strong);

    /* Shadows — deeper for dark backgrounds */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
  }
}

/* Manual toggle: user explicitly chose dark mode */
[data-theme="dark"] {
  --color-mode: "dark";

  --apple-orange-500: #ff9500;
  --apple-orange-600: #ff8800;
  --apple-orange-700: #ff7700;
  --color-primary: #ff9500;
  --color-primary-hover: #ffaa00;

  --apple-gray-50: #1c1c1e;
  --apple-gray-100: #2c2c2e;
  --apple-gray-200: #3a3a3c;
  --apple-gray-300: #48484a;
  --apple-gray-400: #636366;
  --apple-gray-500: #8e8e93;
  --apple-gray-600: #aeaeb2;
  --apple-gray-700: #c7c7cc;
  --apple-gray-800: #d1d1d6;
  --apple-gray-900: #e5e5ea;

  --color-background: #000000;
  --color-surface: #1c1c1e;
  --color-surface-elevated: #2c2c2e;
  --color-surface-overlay: #3a3a3c;

  --color-text: #ffffff;
  --color-text-secondary: #aeaeb2;
  --color-text-tertiary: #8e8e93;
  --color-text-quaternary: #636366;
  --color-text-disabled: #48484a;

  --color-border: #3a3a3c;
  --color-border-light: #2c2c2e;
  --color-border-strong: #48484a;

  --apple-success: #30d158;
  --apple-warning: #ffd60a;
  --apple-danger: #ff453a;
  --apple-info: #0a84ff;

  --card-background: var(--color-surface);
  --card-border: var(--color-border);
  --input-background: var(--color-surface);
  --input-border: var(--color-border);
  --button-background: var(--color-surface-elevated);
  --button-border: var(--color-border-strong);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   Base Element Overrides
   Components using var() tokens inherit dark values automatically.
   These overrides handle elements with hardcoded colors or color-scheme.
   ========================================================================== */

/* Color scheme hint for browser chrome */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
  }
}
[data-theme="dark"] {
  color-scheme: dark;
}

/* Body background and text */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background-color: var(--color-background);
    color: var(--color-text);
    transition: var(--theme-transition);
  }
}
[data-theme="dark"] body {
  background-color: var(--color-background);
  color: var(--color-text);
  transition: var(--theme-transition);
}

/* Headings */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(h1, h2, h3, h4, h5, h6) {
    color: var(--color-text);
  }
}
[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-text);
}

/* Links — hardcoded hover color */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) a {
    color: var(--apple-info);
  }
  :root:not([data-theme="light"]) a:hover {
    color: #409cff;
  }
}
[data-theme="dark"] a {
  color: var(--apple-info);
}
[data-theme="dark"] a:hover {
  color: #409cff;
}

/* Code blocks */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(code, pre) {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
  }
}
[data-theme="dark"] :is(code, pre) {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

/* Blockquotes */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) blockquote {
    border-left-color: var(--color-border-strong);
    color: var(--color-text-secondary);
  }
}
[data-theme="dark"] blockquote {
  border-left-color: var(--color-border-strong);
  color: var(--color-text-secondary);
}

/* Tables */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) table {
    border-color: var(--color-border);
  }
  :root:not([data-theme="light"]) th {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
  }
  :root:not([data-theme="light"]) td {
    border-color: var(--color-border);
    color: var(--color-text);
  }
  :root:not([data-theme="light"]) tr:nth-child(even) {
    background-color: var(--color-surface);
  }
}
[data-theme="dark"] table {
  border-color: var(--color-border);
}
[data-theme="dark"] th {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] td {
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] tr:nth-child(even) {
  background-color: var(--color-surface);
}

/* Horizontal rules */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) hr {
    border-color: var(--color-border);
  }
}
[data-theme="dark"] hr {
  border-color: var(--color-border);
}

/* ==========================================================================
   Form Elements
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(input, textarea, select) {
    background-color: var(--input-background);
    border-color: var(--input-border);
    color: var(--color-text);
  }
  :root:not([data-theme="light"]) :is(input, textarea)::placeholder {
    color: var(--color-text-quaternary);
  }
  :root:not([data-theme="light"]) :is(input, textarea, select):focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.25);
  }
  :root:not([data-theme="light"]) :is(input[type="checkbox"], input[type="radio"]) {
    background-color: var(--input-background);
    border-color: var(--input-border);
  }
  :root:not([data-theme="light"]) :is(input[type="checkbox"], input[type="radio"]):checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
  }
  :root:not([data-theme="light"]) label {
    color: var(--color-text);
  }
  :root:not([data-theme="light"]) fieldset {
    border-color: var(--color-border);
  }
  :root:not([data-theme="light"]) legend {
    color: var(--color-text);
  }
}

[data-theme="dark"] :is(input, textarea, select) {
  background-color: var(--input-background);
  border-color: var(--input-border);
  color: var(--color-text);
}
[data-theme="dark"] :is(input, textarea)::placeholder {
  color: var(--color-text-quaternary);
}
[data-theme="dark"] :is(input, textarea, select):focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.25);
}
[data-theme="dark"] :is(input[type="checkbox"], input[type="radio"]) {
  background-color: var(--input-background);
  border-color: var(--input-border);
}
[data-theme="dark"] :is(input[type="checkbox"], input[type="radio"]):checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
[data-theme="dark"] label {
  color: var(--color-text);
}
[data-theme="dark"] fieldset {
  border-color: var(--color-border);
}
[data-theme="dark"] legend {
  color: var(--color-text);
}

/* ==========================================================================
   Button Variants — Hardcoded colors need overrides
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .aiab-btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #000000;
  }
  :root:not([data-theme="light"]) .aiab-btn-primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
  }
  :root:not([data-theme="light"]) .aiab-btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #ffffff;
  }
  :root:not([data-theme="light"]) .aiab-btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
  }
  :root:not([data-theme="light"]) .aiab-btn-success {
    background-color: var(--apple-success);
    border-color: var(--apple-success);
    color: #ffffff;
  }
  :root:not([data-theme="light"]) .aiab-btn-success:hover {
    background-color: #28b94e;
    border-color: #28b94e;
  }
  :root:not([data-theme="light"]) .aiab-btn-danger {
    background-color: var(--apple-danger);
    border-color: var(--apple-danger);
    color: #ffffff;
  }
  :root:not([data-theme="light"]) .aiab-btn-danger:hover {
    background-color: #e63b30;
    border-color: #e63b30;
  }
  :root:not([data-theme="light"]) .aiab-btn-warning {
    background-color: var(--apple-warning);
    border-color: var(--apple-warning);
    color: #000000;
  }
  :root:not([data-theme="light"]) .aiab-btn-warning:hover {
    background-color: #e6c009;
    border-color: #e6c009;
  }
  :root:not([data-theme="light"]) .aiab-btn-info {
    background-color: var(--apple-info);
    border-color: var(--apple-info);
    color: #ffffff;
  }
  :root:not([data-theme="light"]) .aiab-btn-info:hover {
    background-color: #0977e6;
    border-color: #0977e6;
  }
  :root:not([data-theme="light"]) .aiab-btn-light {
    background-color: var(--color-surface-elevated);
    border-color: var(--color-border);
    color: var(--color-text);
  }
  :root:not([data-theme="light"]) .aiab-btn-light:hover {
    background-color: var(--color-surface-overlay);
    border-color: var(--color-border-strong);
  }
  :root:not([data-theme="light"]) .aiab-btn-dark {
    background-color: #e5e5ea;
    border-color: #e5e5ea;
    color: #000000;
  }
  :root:not([data-theme="light"]) .aiab-btn-dark:hover {
    background-color: #d1d1d6;
    border-color: #d1d1d6;
  }
}

[data-theme="dark"] .aiab-btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #000000;
}
[data-theme="dark"] .aiab-btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
[data-theme="dark"] .aiab-btn-secondary {
  background-color: #6c757d;
  border-color: #6c757d;
  color: #ffffff;
}
[data-theme="dark"] .aiab-btn-secondary:hover {
  background-color: #5a6268;
  border-color: #545b62;
}
[data-theme="dark"] .aiab-btn-success {
  background-color: var(--apple-success);
  border-color: var(--apple-success);
  color: #ffffff;
}
[data-theme="dark"] .aiab-btn-success:hover {
  background-color: #28b94e;
  border-color: #28b94e;
}
[data-theme="dark"] .aiab-btn-danger {
  background-color: var(--apple-danger);
  border-color: var(--apple-danger);
  color: #ffffff;
}
[data-theme="dark"] .aiab-btn-danger:hover {
  background-color: #e63b30;
  border-color: #e63b30;
}
[data-theme="dark"] .aiab-btn-warning {
  background-color: var(--apple-warning);
  border-color: var(--apple-warning);
  color: #000000;
}
[data-theme="dark"] .aiab-btn-warning:hover {
  background-color: #e6c009;
  border-color: #e6c009;
}
[data-theme="dark"] .aiab-btn-info {
  background-color: var(--apple-info);
  border-color: var(--apple-info);
  color: #ffffff;
}
[data-theme="dark"] .aiab-btn-info:hover {
  background-color: #0977e6;
  border-color: #0977e6;
}
[data-theme="dark"] .aiab-btn-light {
  background-color: var(--color-surface-elevated);
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] .aiab-btn-light:hover {
  background-color: var(--color-surface-overlay);
  border-color: var(--color-border-strong);
}
[data-theme="dark"] .aiab-btn-dark {
  background-color: #e5e5ea;
  border-color: #e5e5ea;
  color: #000000;
}
[data-theme="dark"] .aiab-btn-dark:hover {
  background-color: #d1d1d6;
  border-color: #d1d1d6;
}

/* ==========================================================================
   Modal & Overlay — Hardcoded rgba backdrop
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.aiab-modal-backdrop, .aiab-overlay) {
    background-color: rgba(0, 0, 0, 0.85);
  }
}
[data-theme="dark"] :is(.aiab-modal-backdrop, .aiab-overlay) {
  background-color: rgba(0, 0, 0, 0.85);
}

/* ==========================================================================
   Utility Class Overrides
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .aiab-bg-light {
    background-color: var(--color-surface);
  }
  :root:not([data-theme="light"]) .aiab-bg-dark {
    background-color: var(--color-background);
  }
  :root:not([data-theme="light"]) .aiab-text-muted {
    color: var(--color-text-secondary);
  }
  :root:not([data-theme="light"]) .aiab-text-dark {
    color: var(--color-text);
  }
  :root:not([data-theme="light"]) .aiab-text-light {
    color: var(--color-text-secondary);
  }
  :root:not([data-theme="light"]) .aiab-border {
    border-color: var(--color-border);
  }
}

[data-theme="dark"] .aiab-bg-light {
  background-color: var(--color-surface);
}
[data-theme="dark"] .aiab-bg-dark {
  background-color: var(--color-background);
}
[data-theme="dark"] .aiab-text-muted {
  color: var(--color-text-secondary);
}
[data-theme="dark"] .aiab-text-dark {
  color: var(--color-text);
}
[data-theme="dark"] .aiab-text-light {
  color: var(--color-text-secondary);
}
[data-theme="dark"] .aiab-border {
  border-color: var(--color-border);
}

/* ==========================================================================
   Smooth Theme Transition
   ========================================================================== */

.aiab-theme-transition * {
  transition: var(--theme-transition);
}

@media (prefers-reduced-motion: reduce) {
  .aiab-theme-transition * {
    transition: none;
  }
}

/* ==========================================================================
   Dark Mode Toggle Component
   ========================================================================== */

.aiab-dark-mode-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 200ms ease;
  z-index: 9999;
}

.aiab-dark-mode-toggle:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-xl);
}

.aiab-dark-mode-toggle:active {
  transform: scale(0.95);
}

.aiab-dark-mode-toggle svg {
  width: 24px;
  height: 24px;
  color: var(--color-text);
  transition: transform 200ms ease;
}

.aiab-dark-mode-toggle:hover svg {
  transform: rotate(20deg);
}

/* Toggle icon states:
   Light mode (default) = show moon icon (click to go dark)
   Dark mode = show sun icon (click to go light) */

/* Light mode default: show moon, hide sun */
.aiab-dark-mode-toggle .sun-icon {
  display: none;
}
.aiab-dark-mode-toggle .moon-icon {
  display: block;
}

/* Dark mode: show sun, hide moon */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .aiab-dark-mode-toggle .sun-icon {
    display: block;
  }
  :root:not([data-theme="light"]) .aiab-dark-mode-toggle .moon-icon {
    display: none;
  }
}

[data-theme="dark"] .aiab-dark-mode-toggle .sun-icon {
  display: block;
}
[data-theme="dark"] .aiab-dark-mode-toggle .moon-icon {
  display: none;
}

/* Explicit light override (user chose light while system is dark) */
[data-theme="light"] .aiab-dark-mode-toggle .sun-icon {
  display: none;
}
[data-theme="light"] .aiab-dark-mode-toggle .moon-icon {
  display: block;
}

/* ==========================================================================
   Accessibility Improvements for Dark Mode
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
  :root:not([data-theme="light"]) ::selection {
    background-color: var(--color-primary);
    color: #000000;
  }
  :root:not([data-theme="light"]) :disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

[data-theme="dark"] :focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

[data-theme="dark"] ::selection {
  background-color: var(--color-primary);
  color: #000000;
}

[data-theme="dark"] :disabled {
  opacity: 0.6;
  cursor: not-allowed;
}