/* =============================
   _variables.css
   Theme variables for light, dark, and system modes
   ============================= */

:root {
  /* Accessible light theme (WCAG AA+) */
  --color-bg: #fff;
  --color-bg-alt: #f7f8fa;
  --color-text: #23272b;
  --color-text-muted: #6c757d;
  --color-border: #dbe0e6;
  --color-accent: #007ac3; /* Brand blue */
  --color-success: #85bc20; /* Brand green */
  --color-error: #d7263d;
  --color-info: #e3f2fd;
  --color-card: #fff;
  --color-btn-bg: #f1f3f7;
  --color-btn-text: #23272b;
  --color-btn-hover-bg: #e9ecef;
  --color-btn-hover-text: #007ac3;
  --color-link: #007ac3;
  --color-link-hover: #005fa3;
  --color-input-bg: #fff;
  --color-input-text: #23272b;
  --color-input-border: #dbe0e6;
  --transition-theme: background 0.3s, color 0.3s, border-color 0.3s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #181c1f;
    --color-bg-alt: #21262a;
    --color-text: #f1f2f4;
    --color-text-muted: #b0b8c1;
    --color-border: #353b41;
    --color-accent: #007ac3;
    --color-success: #85bc20;
    --color-error: #ff5f5f;
    --color-info: #2c3e50;
    --color-card: #23272b;
    --color-btn-bg: #23272b;
    --color-btn-text: #f1f2f4;
    --color-btn-hover-bg: #2c3137;
    --color-btn-hover-text: #85bc20;
    --color-link: #4dabf7;
    --color-link-hover: #007ac3;
    --color-input-bg: #23272b;
    --color-input-text: #f1f2f4;
    --color-input-border: #353b41;
    --transition-theme: background 0.3s, color 0.3s, border-color 0.3s;
  }
}

html[data-theme="light"] {
  --color-bg: #fff !important;
  --color-bg-alt: #f7f8fa !important;
  --color-text: #23272b !important;
  --color-text-muted: #6c757d !important;
  --color-border: #dbe0e6 !important;
  --color-accent: #007ac3 !important;
  --color-success: #85bc20 !important;
  --color-error: #d7263d !important;
  --color-info: #e3f2fd !important;
  --color-card: #fff !important;
  --color-btn-bg: #f1f3f7 !important;
  --color-btn-text: #23272b !important;
  --color-btn-hover-bg: #e9ecef !important;
  --color-btn-hover-text: #007ac3 !important;
  --color-link: #007ac3 !important;
  --color-link-hover: #005fa3 !important;
  --color-input-bg: #fff !important;
  --color-input-text: #23272b !important;
  --color-input-border: #dbe0e6 !important;
  --transition-theme: background 0.3s, color 0.3s, border-color 0.3s !important;
}
html[data-theme="dark"] {
  --color-bg: #181c1f !important;
  --color-bg-alt: #21262a !important;
  --color-text: #f1f2f4 !important;
  --color-text-muted: #b0b8c1 !important;
  --color-border: #353b41 !important;
  --color-accent: #007ac3 !important;
  --color-success: #85bc20 !important;
  --color-error: #ff5f5f !important;
  --color-info: #2c3e50 !important;
  --color-card: #23272b !important;
  --color-btn-bg: #23272b !important;
  --color-btn-text: #f1f2f4 !important;
  --color-btn-hover-bg: #2c3137 !important;
  --color-btn-hover-text: #85bc20 !important;
  --color-link: #4dabf7 !important;
  --color-link-hover: #007ac3 !important;
  --color-input-bg: #23272b !important;
  --color-input-text: #f1f2f4 !important;
  --color-input-border: #353b41 !important;
  --transition-theme: background 0.3s, color 0.3s, border-color 0.3s !important;
}