/**
 * Theme-Light — generische Variablen-Overrides für Sub-Pages.
 *
 * Sub-Pages, die einer Konvention folgen (CSS-Variablen --bg, --surface,
 * --border, --text, --text2, --text3, --accent), bekommen Light-Mode
 * "kostenlos" durch Einbinden dieser Datei. Komponenten, die hardcodete
 * rgba()-Farben nutzen, brauchen weiterhin individuelle Overrides per
 * Sub-Page (am besten am Ende der eigenen <style>-Section).
 */
:root[data-theme="light"] {
  --bg: #f5f5fa;
  --surface: rgba(255,255,255,0.92);
  --surface-solid: #ffffff;
  --surface2: #f0f0f7;
  --bg2: #ebebf2;
  --border: rgba(15,15,30,0.1);
  --border-strong: rgba(15,15,30,0.18);
  --accent: #5b54e8;
  --accent2: #2eb4ac;
  --text: #14141d;
  --text2: rgba(20,20,29,0.66);
  --text3: rgba(20,20,29,0.45);
  --red: #dc2626;
  --warn: #d97706;
  --ok: #059669;
}
:root[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}

/* Generische Surface-Inversionen — die meisten Hardcoded-Backgrounds in
   unseren Sub-Pages liegen in einem dieser Tonbereiche. */
:root[data-theme="light"] .panel,
:root[data-theme="light"] .card,
:root[data-theme="light"] .modal,
:root[data-theme="light"] .drawer {
  background: #ffffff;
  color: var(--text);
}

/* Inputs / Textareas / Selects — fast alle nutzen rgba(255,255,255,0.0X) */
:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select,
:root[data-theme="light"] .input,
:root[data-theme="light"] .textarea {
  background: rgba(15,15,30,0.04);
  color: var(--text);
  border-color: var(--border);
}
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder { color: var(--text3); }
:root[data-theme="light"] input:focus,
:root[data-theme="light"] textarea:focus,
:root[data-theme="light"] select:focus {
  background: rgba(15,15,30,0.06);
  border-color: var(--accent);
}

/* Code/Pre */
:root[data-theme="light"] code,
:root[data-theme="light"] pre {
  background: rgba(15,15,30,0.06);
  color: var(--text);
}