/* CSS Custom Properties */
:root {
  --background-light: #FFFFFF;
  --background-dark: #000000;
  --surface-light: #F8F9FA;
  --surface-dark: #1A1A1A;
  --text-primary-light: #333333;
  --text-primary-dark: #E0E0E0;
  --text-secondary-light: #6C757D;
  --text-secondary-dark: #B0B0B0;
  --shadow-light: rgba(0, 0, 0, 0.1);
  --shadow-dark: rgba(255, 255, 255, 0.05);
  --border-light: rgba(0, 0, 0, 0.12);
  --border-dark: rgba(255, 255, 255, 0.12);
  --accent-light: #007AFF;
  --accent-dark: #0A84FF;
}

/* Light theme variables */
[data-theme="light"] {
  --background-color: var(--background-light);
  --surface-color: var(--surface-light);
  --text-color: var(--text-primary-light);
  --text-secondary: var(--text-secondary-light);
  --shadow-color: var(--shadow-light);
  --border-color: var(--border-light);
  --accent-color: var(--accent-light);
  --spinner-border: rgba(51, 51, 51, 0.3);
  --spinner-top: var(--text-primary-light);
  --logo-image: url('icons/Icon-512.png');
}

/* Dark theme variables */
[data-theme="dark"] {
  --background-color: var(--background-dark);
  --surface-color: var(--surface-dark);
  --text-color: var(--text-primary-dark);
  --text-secondary: var(--text-secondary-dark);
  --shadow-color: var(--shadow-dark);
  --border-color: var(--border-dark);
  --accent-color: var(--accent-dark);
  --spinner-border: rgba(224, 224, 224, 0.3);
  --spinner-top: var(--text-primary-dark);
  --logo-image: url('icons/Icon-maskable_dark-512.png');
}

/* Auto theme detection */
@media (prefers-color-scheme: light) {
  :root {
    --background-color: var(--background-light);
    --surface-color: var(--surface-light);
    --text-color: var(--text-primary-light);
    --text-secondary: var(--text-secondary-light);
    --shadow-color: var(--shadow-light);
    --border-color: var(--border-light);
    --accent-color: var(--accent-light);
    --spinner-border: rgba(51, 51, 51, 0.3);
    --spinner-top: var(--text-primary-light);
    --logo-image: url('../icons/Icon-512.png');
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: var(--background-dark);
    --surface-color: var(--surface-dark);
    --text-color: var(--text-primary-dark);
    --text-secondary: var(--text-secondary-dark);
    --shadow-color: var(--shadow-dark);
    --border-color: var(--border-dark);
    --accent-color: var(--accent-dark);
    --spinner-border: rgba(224, 224, 224, 0.3);
    --spinner-top: var(--text-primary-dark);
    --logo-image: url('../icons/Icon-maskable_dark-512.png');
  }
}