/* ============================================
   Solo Software - Dark Mode Styles
   iOS-inspired dark mode colors
   ============================================ */

/* ============================================
   Dark Mode Variables
   Applied when body has .dark-mode class or user prefers dark color scheme
   ============================================ */

/* System preference dark mode */
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) {
    /* Colors remain the same */
    --color-primary: #0A84FF;
    --color-primary-hover: #409CFF;
    --color-secondary: #5E5CE6;
    --color-success: #32D74B;
    --color-warning: #FF9F0A;
    --color-error: #FF453A;

    /* Backgrounds */
    --bg-primary: #000000;
    --bg-secondary: #1C1C1E;
    --bg-tertiary: #2C2C2E;
    --bg-card: #1C1C1E;
    --bg-card-hover: #2C2C2E;

    /* Text */
    --text-primary: #FFFFFF;
    --text-secondary: #EBEBF5;
    --text-tertiary: #8E8E93;

    /* Borders */
    --border-color: #38383A;

    /* Shadows */
    --shadow-small: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-large: 0 8px 24px rgba(0, 0, 0, 0.7);
  }
}

/* Manual dark mode toggle (when body has .dark-mode class) */
body.dark-mode {
  /* Colors */
  --color-primary: #0A84FF;
  --color-primary-hover: #409CFF;
  --color-secondary: #5E5CE6;
  --color-success: #32D74B;
  --color-warning: #FF9F0A;
  --color-error: #FF453A;

  /* Backgrounds */
  --bg-primary: #000000;
  --bg-secondary: #1C1C1E;
  --bg-tertiary: #2C2C2E;
  --bg-card: #1C1C1E;
  --bg-card-hover: #2C2C2E;

  /* Text */
  --text-primary: #FFFFFF;
  --text-secondary: #EBEBF5;
  --text-tertiary: #8E8E93;

  /* Borders */
  --border-color: #38383A;

  /* Shadows */
  --shadow-small: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-large: 0 8px 24px rgba(0, 0, 0, 0.7);
}

/* ============================================
   Dark Mode - Header Adjustments
   ============================================ */
body.dark-mode .site-header,
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .site-header {
    background-color: var(--bg-primary);
  }
}

/* ============================================
   Dark Mode - Card Adjustments
   ============================================ */
body.dark-mode .app-card,
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .app-card {
    border: 1px solid var(--border-color);
  }

  body.dark-mode .app-card:hover,
  :root:not(.light-mode) .app-card:hover {
    border-color: var(--color-primary);
  }
}

/* ============================================
   Dark Mode - Form Elements
   ============================================ */
body.dark-mode .form-input,
body.dark-mode .form-textarea,
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .form-input,
  :root:not(.light-mode) .form-textarea {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
  }

  body.dark-mode .form-input:focus,
  body.dark-mode .form-textarea:focus,
  :root:not(.light-mode) .form-input:focus,
  :root:not(.light-mode) .form-textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.2);
  }
}

/* ============================================
   Dark Mode - Button Adjustments
   ============================================ */
body.dark-mode .btn-secondary,
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .btn-secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
  }

  body.dark-mode .btn-secondary:hover,
  :root:not(.light-mode) .btn-secondary:hover {
    background-color: var(--border-color);
  }
}

/* ============================================
   Dark Mode - Images
   Slightly reduce brightness for better integration
   ============================================ */
body.dark-mode img:not(.no-dark-filter),
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) img:not(.no-dark-filter) {
    opacity: 0.9;
  }
}

/* ============================================
   Dark Mode - Code Blocks (if used)
   ============================================ */
body.dark-mode pre,
body.dark-mode code,
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) pre,
  :root:not(.light-mode) code {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
  }
}

/* ============================================
   Dark Mode - Tables (if used)
   ============================================ */
body.dark-mode table,
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) table {
    border-color: var(--border-color);
  }

  body.dark-mode th,
  body.dark-mode td,
  :root:not(.light-mode) th,
  :root:not(.light-mode) td {
    border-color: var(--border-color);
  }

  body.dark-mode th,
  :root:not(.light-mode) th {
    background-color: var(--bg-tertiary);
  }
}

/* ============================================
   Dark Mode - Selection
   ============================================ */
body.dark-mode ::selection,
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) ::selection {
    background-color: rgba(10, 132, 255, 0.3);
    color: var(--text-primary);
  }
}

/* ============================================
   Dark Mode Toggle Icon
   Switch between sun and moon icons
   ============================================ */
.dark-mode-toggle .icon-moon {
  display: none;
}

.dark-mode-toggle .icon-sun {
  display: inline;
}

body.dark-mode .dark-mode-toggle .icon-moon,
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) .dark-mode-toggle .icon-moon {
    display: inline;
  }

  body.dark-mode .dark-mode-toggle .icon-sun,
  :root:not(.light-mode) .dark-mode-toggle .icon-sun {
    display: none;
  }
}
