/* ============================================================
 * WEG Theme — CSS Custom Properties
 * Provides light mode defaults, explicit dark mode class,
 * and system preference auto-detection.
 *
 * Load this BEFORE any helper stylesheet so variables are
 * resolved when the helper CSS references them.
 * ============================================================ */

:root {
  /* === Surface Colors === */
  --weg-bg-primary: #FFFFFF;
  --weg-bg-secondary: #f4f3f3;
  --weg-bg-tertiary: #F5F9FC;
  --weg-bg-alt-row: #E9F0F7;
  --weg-bg-input: #FFFFFF;

  /* === Text Colors === */
  --weg-text-primary: #222;
  --weg-text-secondary: rgba(74, 74, 74, 0.7);
  --weg-text-muted: rgba(74, 74, 74, 0.5);
  --weg-text-legal: rgba(74, 74, 74, 0.3);
  --weg-text-form: #0A1150;
  --weg-text-result: #05080E;
  --weg-text-input: #BE2718;
  --weg-text-placeholder: Grey;

  /* === Accent Colors === */
  --weg-accent-primary: #335190;
  --weg-accent-primary-hover: #263c6a;
  --weg-accent-primary-active: #182745;
  --weg-accent-error: #BE2718;
  --weg-accent-wildcard: #d84315;

  /* === Border Colors === */
  --weg-border-input: #023C6F;
  --weg-border-light: #ccc;
  --weg-border-medium: #E9E3E3;

  /* === Component Colors === */
  --weg-header-bg: #f4f3f3;
  --weg-footer-bg: #f4f3f3;
  --weg-logo-bg: #335190;
  --weg-logo-hover-bg: #263c6a;
  --weg-clear-btn-bg: #FFFFFF;
  --weg-clear-btn-hover-bg: lightgray;
  --weg-clear-btn-border: #ccc;
  --weg-clear-btn-text: #333;
  --weg-code-bg: #e8e8e8;
  --weg-code-text: #222;

  /* === Link Colors === */
  --weg-link-color: rgba(65, 60, 55, 0.7);
  --weg-link-hover-color: #413c37;
  --weg-link-hover-border: #413C37;
  --weg-footer-link: rgba(74, 74, 74, 0.5);
  --weg-footer-link-hover: rgba(74, 74, 74, 0.7);
  --weg-footer-border-top: rgba(0, 0, 0, 0.05);

  /* === Selection === */
  --weg-selection-bg: #b3d4fc;

  /* === Scrollbar (IE/Edge legacy) === */
  --weg-scrollbar-face: #B8BACC;
  --weg-scrollbar-track: #7888AB;

  /* === HR === */
  --weg-hr-border: #ccc;
  --weg-hr-color: #B8BACC;

  /* === Shadow === */
  --weg-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.15);
  --weg-shadow-header: 0 1px 0 rgba(0, 0, 0, 0.1);
  --weg-shadow-inset: 0 -1px 1px rgba(0, 0, 0, 0.2) inset;

  /* === Wordle-Specific === */
  --weg-wordle-filled: #60a35a;
  --weg-wordle-include: #cdb85d;
  --weg-wordle-include-hover: #b09b4d;
  --weg-wordle-exclude: #c1cacf;
}

/* ============================================================
 * DARK MODE — class-based toggle
 * Applied by JS when user explicitly selects dark mode.
 * ============================================================ */
html.dark-mode {
  --weg-bg-primary: #1a1a2e;
  --weg-bg-secondary: #16213e;
  --weg-bg-tertiary: #1a2744;
  --weg-bg-alt-row: #1e2d4d;
  --weg-bg-input: #0f1629;

  --weg-text-primary: #e0e0e0;
  --weg-text-secondary: rgba(200, 200, 210, 0.8);
  --weg-text-muted: rgba(200, 200, 210, 0.5);
  --weg-text-legal: rgba(200, 200, 210, 0.3);
  --weg-text-form: #c5c7e0;
  --weg-text-result: #e8eaf6;
  --weg-text-input: #ff7043;
  --weg-text-placeholder: #888;

  --weg-accent-primary: #5c7cfa;
  --weg-accent-primary-hover: #748ffc;
  --weg-accent-primary-active: #4263eb;
  --weg-accent-error: #ff6b6b;
  --weg-accent-wildcard: #ff7043;

  --weg-border-input: #4a5568;
  --weg-border-light: #3d3d5c;
  --weg-border-medium: #2d2d4a;

  --weg-header-bg: #0f1629;
  --weg-footer-bg: #0f1629;
  --weg-logo-bg: #4263eb;
  --weg-logo-hover-bg: #3b5bdb;
  --weg-clear-btn-bg: #16213e;
  --weg-clear-btn-hover-bg: #1e2d4d;
  --weg-clear-btn-border: #3d3d5c;
  --weg-clear-btn-text: #e0e0e0;
  --weg-code-bg: #2d2d4a;
  --weg-code-text: #e0e0e0;

  --weg-link-color: rgba(200, 200, 210, 0.7);
  --weg-link-hover-color: #e0e0e0;
  --weg-link-hover-border: #e0e0e0;
  --weg-footer-link: rgba(200, 200, 210, 0.5);
  --weg-footer-link-hover: rgba(200, 200, 210, 0.7);
  --weg-footer-border-top: rgba(255, 255, 255, 0.05);

  --weg-selection-bg: #3b5bdb;

  --weg-scrollbar-face: #3d3d5c;
  --weg-scrollbar-track: #1a1a2e;

  --weg-hr-border: #3d3d5c;
  --weg-hr-color: #3d3d5c;

  --weg-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --weg-shadow-header: 0 1px 0 rgba(255, 255, 255, 0.05);
  --weg-shadow-inset: 0 -1px 1px rgba(0, 0, 0, 0.4) inset;

  /* === Wordle-Specific === */
  --weg-wordle-filled: #4caf50;
  --weg-wordle-include: #c9a726;
  --weg-wordle-include-hover: #b89620;
  --weg-wordle-exclude: #5a6570;

  color-scheme: dark;
}

/* ============================================================
 * SYSTEM PREFERENCE AUTO-DETECTION
 * Applies dark mode for users who haven't explicitly chosen.
 * When user sets a preference, JS adds .dark-mode or .light-mode
 * class, overriding this media query.
 * ============================================================ */
@media (prefers-color-scheme: dark) {
  html:not(.light-mode) {
    --weg-bg-primary: #1a1a2e;
    --weg-bg-secondary: #16213e;
    --weg-bg-tertiary: #1a2744;
    --weg-bg-alt-row: #1e2d4d;
    --weg-bg-input: #0f1629;

    --weg-text-primary: #e0e0e0;
    --weg-text-secondary: rgba(200, 200, 210, 0.8);
    --weg-text-muted: rgba(200, 200, 210, 0.5);
    --weg-text-legal: rgba(200, 200, 210, 0.3);
    --weg-text-form: #c5c7e0;
    --weg-text-result: #e8eaf6;
    --weg-text-input: #ff7043;
    --weg-text-placeholder: #888;

    --weg-accent-primary: #5c7cfa;
    --weg-accent-primary-hover: #748ffc;
    --weg-accent-primary-active: #4263eb;
    --weg-accent-error: #ff6b6b;
    --weg-accent-wildcard: #ff7043;

    --weg-border-input: #4a5568;
    --weg-border-light: #3d3d5c;
    --weg-border-medium: #2d2d4a;

    --weg-header-bg: #0f1629;
    --weg-footer-bg: #0f1629;
    --weg-logo-bg: #4263eb;
    --weg-logo-hover-bg: #3b5bdb;
    --weg-clear-btn-bg: #16213e;
    --weg-clear-btn-hover-bg: #1e2d4d;
    --weg-clear-btn-border: #3d3d5c;
    --weg-clear-btn-text: #e0e0e0;
    --weg-code-bg: #2d2d4a;
    --weg-code-text: #e0e0e0;

    --weg-link-color: rgba(200, 200, 210, 0.7);
    --weg-link-hover-color: #e0e0e0;
    --weg-link-hover-border: #e0e0e0;
    --weg-footer-link: rgba(200, 200, 210, 0.5);
    --weg-footer-link-hover: rgba(200, 200, 210, 0.7);
    --weg-footer-border-top: rgba(255, 255, 255, 0.05);

    --weg-selection-bg: #3b5bdb;

    --weg-scrollbar-face: #3d3d5c;
    --weg-scrollbar-track: #1a1a2e;

    --weg-hr-border: #3d3d5c;
    --weg-hr-color: #3d3d5c;

    --weg-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --weg-shadow-header: 0 1px 0 rgba(255, 255, 255, 0.05);
    --weg-shadow-inset: 0 -1px 1px rgba(0, 0, 0, 0.4) inset;

    /* === Wordle-Specific === */
    --weg-wordle-filled: #4caf50;
    --weg-wordle-include: #c9a726;
    --weg-wordle-include-hover: #b89620;
    --weg-wordle-exclude: #5a6570;

    color-scheme: dark;
  }
}