/* Theme variables (light + dark)
   - Default light values in :root
   - Automatic dark values via prefers-color-scheme
   - Optional explicit override via html[data-theme="light"|"dark"]
*/

:root {
  color-scheme: light;

  --font-family: Arial, sans-serif;

  --color-bg: #f4f6fa;
  --color-surface: #ffffff;
  --color-surface-2: #f7fafd;
  --color-surface-3: #e3eaf2;
  --color-surface-hover: #eaf6ff;

  --color-border: #dddddd;
  --color-border-subtle: #eeeeee;

  --color-text: #2a3a4a;
  --color-text-muted: #666666;
  --color-text-faint: #888888;

  --color-link: #2a3a4a;

  --color-primary: #2a3a4a;
  --color-primary-contrast: #ffffff;

  --shadow-elev-1: 0 2px 8px #0001;
  --shadow-elev-2: 0 2px 4px rgba(0, 0, 0, 0.1);

  /* Components */
  --table-header-bg: var(--color-surface-3);
  --table-even-bg: var(--color-surface-2);
  --table-row-hover-bg: var(--color-surface-hover);

  --button-bg: var(--color-surface-2);
  --button-border: #bbbbbb;
  --button-hover-bg: var(--color-surface-3);

  --info-bg: #f8f9fb;
  --info-text: #333333;
  --info-secondary: #555555;
  --info-accent: var(--color-primary);

  /* Charts */
  --chart-grid: rgba(42, 58, 74, 0.18);
  --tooltip-bg: rgba(42, 58, 74, 0.92);
  --tooltip-text: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --color-bg: #0f141b;
    --color-surface: #151c25;
    --color-surface-2: #1b2430;
    --color-surface-3: #243140;
    --color-surface-hover: #203042;

    --color-border: #2a3a4a;
    --color-border-subtle: #233243;

    --color-text: #e7eef6;
    --color-text-muted: #b3c0cc;
    --color-text-faint: #93a4b4;

    --color-link: #e7eef6;

    --color-primary: #bcd0e3;
    --color-primary-contrast: #0f141b;

    --shadow-elev-1: 0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-elev-2: 0 6px 18px rgba(0, 0, 0, 0.35);

    --table-header-bg: #1b2736;
    --table-even-bg: #121a24;
    --table-row-hover-bg: #1a2a3a;

    --button-bg: #1b2430;
    --button-border: #395168;
    --button-hover-bg: #243140;

    --info-bg: #121a24;
    --info-text: #d8e2ec;
    --info-secondary: #b3c0cc;
    --info-accent: #93b7da;

    --chart-grid: rgba(231, 238, 246, 0.16);
    --tooltip-bg: rgba(15, 20, 27, 0.94);
    --tooltip-text: #e7eef6;
  }
}

/* Explicit override (wins over media query) */
:root[data-theme="light"] {
  color-scheme: light;

  --color-bg: #f4f6fa;
  --color-surface: #ffffff;
  --color-surface-2: #f7fafd;
  --color-surface-3: #e3eaf2;
  --color-surface-hover: #eaf6ff;

  --color-border: #dddddd;
  --color-border-subtle: #eeeeee;

  --color-text: #2a3a4a;
  --color-text-muted: #666666;
  --color-text-faint: #888888;

  --color-link: #2a3a4a;

  --color-primary: #2a3a4a;
  --color-primary-contrast: #ffffff;

  --shadow-elev-1: 0 2px 8px #0001;
  --shadow-elev-2: 0 2px 4px rgba(0, 0, 0, 0.1);

  --table-header-bg: var(--color-surface-3);
  --table-even-bg: var(--color-surface-2);
  --table-row-hover-bg: var(--color-surface-hover);

  --button-bg: var(--color-surface-2);
  --button-border: #bbbbbb;
  --button-hover-bg: var(--color-surface-3);

  --info-bg: #f8f9fb;
  --info-text: #333333;
  --info-secondary: #555555;
  --info-accent: var(--color-primary);

  --chart-grid: rgba(42, 58, 74, 0.18);
  --tooltip-bg: rgba(42, 58, 74, 0.92);
  --tooltip-text: #ffffff;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0f141b;
  --color-surface: #151c25;
  --color-surface-2: #1b2430;
  --color-surface-3: #243140;
  --color-surface-hover: #203042;

  --color-border: #2a3a4a;
  --color-border-subtle: #233243;

  --color-text: #e7eef6;
  --color-text-muted: #b3c0cc;
  --color-text-faint: #93a4b4;

  --color-link: #e7eef6;

  --color-primary: #bcd0e3;
  --color-primary-contrast: #0f141b;

  --shadow-elev-1: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-elev-2: 0 6px 18px rgba(0, 0, 0, 0.35);

  --table-header-bg: #1b2736;
  --table-even-bg: #121a24;
  --table-row-hover-bg: #1a2a3a;

  --button-bg: #1b2430;
  --button-border: #395168;
  --button-hover-bg: #243140;

  --info-bg: #121a24;
  --info-text: #d8e2ec;
  --info-secondary: #b3c0cc;
  --info-accent: #93b7da;

  --chart-grid: rgba(231, 238, 246, 0.16);
  --tooltip-bg: rgba(15, 20, 27, 0.94);
  --tooltip-text: #e7eef6;
}