/* Tokens */
:root, html[data-theme="dark"]{
  --bg: #0A0D12;              /* Seitenhintergrund */
  --card: #111823;
  --text: #E6EEFB;
  --muted: #9AA4B2;
  --border: #233047;
  --primary: #4DABF7;          /* Akzent */
  --primary-contrast: #06121f;
  --danger: #7f1d1d;
  --success: #0f3e25;
  --input: #0e1520;
  
  --gateway-bg: #0b1220;       /* Auth-Panel bleibt dunkel */
  --gateway-shadow: 0 30px 70px rgba(0,0,0,0.45);
  color-scheme: dark;
}

html[data-theme="light"]{
  --bg: #F2F5FA;               /* ruhiger heller Hintergrund */
  --card: #FFFFFF;             /* Standard-Karten (eingeloggt) */
  --text: #0B1220;
  --muted: #4b596f;
  --border: #E2E8F3;
  --primary: #365AE3;          /* etwas kräftiger fürs Licht-Theme */
  --primary-contrast: #ffffff;
  --danger: #FFD9D9;
  --success: #DDF3E6;
  --input: #ffffff;

  /* Auth-Panel bleibt absichtlich dunkel */
  --gateway-bg: #0b1220;
  --gateway-shadow: 0 30px 70px rgba(0,0,0,0.35);
  color-scheme: light;
}

/* Card-Basis (falls schon vorhanden, diesen Block überschreibt) */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  max-width: 640px;
  width: min(640px, 92vw);
  margin: 30px auto;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

/* Gateway-Variante: schwarz, größerer Shadow */
.card.gateway{
  background: var(--gateway-bg);
  box-shadow: var(--gateway-shadow);
}

/* Form-UI */
label{ display:block; margin:12px 0; }
input, select{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--border); background: var(--input); color: var(--text);
  outline: none;
}
input:focus { box-shadow: 0 0 0 2px color-mix(in lab, var(--primary) 45%, transparent); border-color: var(--primary); }

.btn{
  display:inline-block; padding:10px 14px; border-radius:12px; border:1px solid var(--primary);
  background: var(--primary); color: var(--primary-contrast); text-decoration:none; cursor:pointer;
}
.btn:hover{ filter: brightness(1.05); }
.alert{ background: var(--danger); color:#fff; padding:10px 12px; border-radius:10px; margin:10px 0; }
.success{ background: var(--success); color:#c7f3db; padding:10px 12px; border-radius:10px; margin:10px 0; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pill{ display:inline-block; border:1px solid var(--border); border-radius:999px; padding:2px 8px; }
nav a, nav strong { margin-right:4px; text-decoration:none; }

/* Breiten-Tokens */
:root{ --pill-width: 220px; }     /* Pills & Dropdowns */
body.page.auth{ --auth-width: 560px; }  /* Auth-Band-Mitte */

:root{
  --pill-width: 220px;   /* <- HIER die Breite der Pills & Menüs */
  --site-width: 1200px; /* optionale allgemeine Inhaltsbreite */  
}

/* Threads-Defaults (global) */
:root{
  /* Tempo & Form */
  --threads-speed:     0.18;   /* Geschwindigkeit (höher = schneller) */
  --threads-density:   8;      /* Anzahl Linien */
  --threads-amplitude: 42;     /* Wellenhöhe */
  --threads-thickness: 1.2;    /* Strichstärke (px) */
  --threads-opacity:   0.55;   /* Deckkraft 0..1 */

  /* Farben (werden zyklisch benutzt) */
  --thread-1: #63b3ff;
  --thread-2: #7f62ff;
  --thread-3: #56e2c4;
}

/* Beispiel: auf Auth-Seiten etwas ruhiger */
body.page.auth{
  --threads-speed: 0.12;
  --threads-opacity: 0.5;
}

/* === FORM THEME TOKENS === */
:root{
  /* Dark (Default) */
  --input-bg:           #0e1622;
  --input-border:       #1d2a3a;
  --input-border-focus: var(--accent, #2dd4bf);
  --input-text:         #e8eef6;
  --input-placeholder:  #9ab0c6;

  --btn-disabled-bg:    #243043;
  --btn-disabled-fg:    #91a4b9;
}

/* Light Mode (nimm den Selector, den dein Theme nutzt – beide sind drin) */
body.theme-light, body.light, :root[data-theme="light"]{
  --input-bg:           #f6f8fb;
  --input-border:       #d6dee8;
  --input-border-focus: var(--accent, #0ea5e9);
  --input-text:         #0c1422;
  --input-placeholder:  #65758b;

  --btn-disabled-bg:    #e7edf5;
  --btn-disabled-fg:    #8b9bb0;
}

:root{
  --policy-ok:   #16a34a; /* Grün */
  --policy-fail: #e11d48; /* Rot  */
}