:root {
  --bg:          #f5f6f8;
  --surface:     #ffffff;
  --surface-2:   #f0f4ff;
  --surface-3:   #f8f9ff;

  --header-bg:   #1a1a2e;
  --header-text: #ffffff;
  --header-text-2: rgba(255,255,255,0.75);

  --text:        #333333;
  --text-2:      #555555;
  --text-3:      #888888;
  --text-muted:  #aaaaaa;

  --border:      #dddddd;
  --border-2:    #eeeeee;
  --border-3:    #cccccc;

  --accent:      #4a6cf7;
  --accent-hover:#3a5ce6;
  --accent-light:#f0f4ff;
  --accent-light-2: #dce6ff;

  --success:     #22c55e;
  --success-bg:  #d4edda;
  --error:       #e74c3c;
  --error-bg:    #fdecea;
  --warning:     #f59e0b;
  --warning-bg:  #fff3cd;
  --info:        #0369a1;
  --info-bg:     #bae6fd;

  --shadow-sm:   rgba(0,0,0,0.06);
  --shadow:      rgba(0,0,0,0.12);
  --shadow-lg:   rgba(0,0,0,0.18);
  --overlay:     rgba(0,0,0,0.45);
}

[data-theme="dark"] {
  --bg:          #111318;
  --surface:     #1c2028;
  --surface-2:   #252b38;
  --surface-3:   #1a1f2b;

  --header-bg:   #0d0f14;
  --header-text: #ffffff;
  --header-text-2: rgba(255,255,255,0.65);

  --text:        #e2e4e8;
  --text-2:      #9aa0b0;
  --text-3:      #868c9c;
  --text-muted:  #7a8090;

  --border:      #2a3040;
  --border-2:    #1e2430;
  --border-3:    #363d50;

  --accent:      #6a8af7;
  --accent-hover:#5a7af7;
  --accent-light:#1a2040;
  --accent-light-2: #202848;

  --success:     #4ade80;
  --success-bg:  #14361f;
  --error:       #f06050;
  --error-bg:    #2a1010;
  --warning:     #fbbf24;
  --warning-bg:  #2a1e08;
  --info:        #38bdf8;
  --info-bg:     #0a1e2e;

  --shadow-sm:   rgba(0,0,0,0.2);
  --shadow:      rgba(0,0,0,0.35);
  --shadow-lg:   rgba(0,0,0,0.5);
  --overlay:     rgba(0,0,0,0.65);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #111318;
    --surface:     #1c2028;
    --surface-2:   #252b38;
    --surface-3:   #1a1f2b;

    --header-bg:   #0d0f14;
    --header-text: #ffffff;
    --header-text-2: rgba(255,255,255,0.65);

    --text:        #e2e4e8;
    --text-2:      #9aa0b0;
    --text-3:      #6b7080;
    --text-muted:  #4a5060;

    --border:      #2a3040;
    --border-2:    #1e2430;
    --border-3:    #363d50;

    --accent:      #6a8af7;
    --accent-hover:#5a7af7;
    --accent-light:#1a2040;
    --accent-light-2: #202848;

    --success:     #34d370;
    --success-bg:  #0d2a18;
    --error:       #f06050;
    --error-bg:    #2a1010;
    --warning:     #fbbf24;
    --warning-bg:  #2a1e08;
    --info:        #38bdf8;
    --info-bg:     #0a1e2e;

    --shadow-sm:   rgba(0,0,0,0.2);
    --shadow:      rgba(0,0,0,0.35);
    --shadow-lg:   rgba(0,0,0,0.5);
    --overlay:     rgba(0,0,0,0.65);
  }
}

/* Baseline form-control theming so any input/textarea/select without an
   explicit background still adapts to the active theme. Individual pages
   can override these per-component. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
textarea,
select {
  background-color: var(--surface);
  color: var(--text);
}
input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}