/* ============================================
   123bewertet — Design System Base
   ElevenLabs / Apple — Ultra Modern & Minimal
   ============================================ */

:root {
  /* ---- Color Palette ---- */
  /* Stronger contrast between surfaces for readability */
  --surface-0: #ffffff;
  --surface-1: #f5f6f7;
  --surface-2: #ecedf0;
  --surface-3: #e2e3e7;

  --text-primary: #0f0f10;
  --text-secondary: #4a4a4f;
  --text-tertiary: #8a8a92;
  --text-inverse: #ffffff;

  /* Accent - Brand Red (matches logo) */
  --accent-primary: #ef4444;
  --accent-primary-hover: #dc2626;
  --accent-primary-subtle: #fef2f2;
  --accent-secondary: #8b5cf6;

  /* Borders - Visible but clean */
  --border-default: #d8d9dd;
  --border-subtle: #e6e7eb;

  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;

  /* ---- Noten-Farben (1=dunkelgrün → 6=schwarz) ---- */
  --grade-1: #15803d;  /* dunkelgrün */
  --grade-2: #4ade80;  /* zwischen 1 und 3 */
  --grade-3: #a3e635;  /* lime / gelbgrün — klar von #4ade80 (Note 2) abgesetzt */
  --grade-4: #f97316;  /* orange */
  --grade-5: #dc2626;  /* rot */
  --grade-6: #0f0f10;  /* schwarz */

  /* ---- Diagramme (KI-Nutzung): zwei Reihen, farbenblind-sicher geprüft
     (Blau/Orange, ΔE > 24 auch bei Rot-Grün-Schwäche) ---- */
  --chart-input: #2a78d6;   /* Eingabe-Tokens */
  --chart-output: #eb6834;  /* Ausgabe-Tokens */
  --chart-neutral: #8a8a92; /* Zählungen ohne Reihenfarbe */
  --chart-grid: #ecedf0;

  /* ---- Shadows — Subtle & Layered ---- */
  /* Very subtle shadows like ElevenLabs */
  --shadow-xs: rgba(0, 0, 0, 0.04) 0px 1px 2px;
  --shadow-sm: rgba(0, 0, 0, 0.06) 0px 4px 20px 0px;
  --shadow-md: rgba(0, 0, 0, 0.08) 0px 8px 24px 0px;
  --shadow-lg: rgba(0, 0, 0, 0.1) 0px 12px 32px 0px;

  /* ---- Transitions — 75ms Minimal ---- */
  --transition-fast: 75ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Typography ---- */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
}

/* ---- Auth-Form-Inputs ----
   Größere, klar abgegrenzte Eingabefelder für Login/Register/Verify-
   E-Mail-Code etc. Graue Innenfläche im Ruhezustand, weiß + roter
   Glow beim Fokus. */
.auth-input {
  padding: 0.85rem 1rem;
  border: 2px solid var(--border-default);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface-1);
  transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
  outline: none;
}

.auth-input::placeholder {
  color: var(--text-tertiary);
}

.auth-input:focus {
  border-color: var(--accent-primary);
  background: var(--surface-0);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
}

.auth-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---- Dark Mode ---- */
.dark {
  --surface-0: #0f0f10;
  --surface-1: #161617;
  --surface-2: #1f1f21;
  --surface-3: #2a2a2d;

  --text-primary: #ffffff;
  --text-secondary: #d4d4d8;
  --text-tertiary: #89898c;
  --text-inverse: #0f0f10;

  --accent-primary: #ef4444;
  --accent-primary-hover: #f87171;
  --accent-primary-subtle: rgba(239, 68, 68, 0.15);

  --border-default: #2a2a2d;
  --border-subtle: #1f1f21;

  --chart-input: #3987e5;
  --chart-output: #d95926;
  --chart-neutral: #89898c;
  --chart-grid: #1f1f21;

  --shadow-xs: rgba(0, 0, 0, 0.3) 0px 1px 2px;
  --shadow-sm: rgba(0, 0, 0, 0.4) 0px 4px 20px 0px;
  --shadow-md: rgba(0, 0, 0, 0.5) 0px 8px 24px 0px;
  --shadow-lg: rgba(0, 0, 0, 0.6) 0px 12px 32px 0px;
}