/* ============================================
   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 */

  /* ---- 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;
}

/* ---- 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;

  --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;
}