/* Design-Tokens – gemeinsame Grundlage aller Lernmodule (Hören, Vokabeln, Satzbau, Grammatik). */
:root {
  color-scheme: dark;

  /* Flächen */
  --bg: #0a0c11;
  --bg-glow-1: rgba(124, 108, 255, 0.16);
  --bg-glow-2: rgba(45, 212, 191, 0.08);
  --surface-1: #12151d;
  --surface-2: #181c26;
  --surface-3: #202533;
  --field: #0e1118;
  --line: #262b38;
  --line-strong: #353c4e;

  /* Text */
  --text: #f2f4fa;
  --text-2: #b4bccc;
  --text-3: #808a9e;

  /* Akzente */
  --accent: #8b7cff;
  --accent-strong: #a597ff;
  --accent-soft: rgba(139, 124, 255, 0.14);
  --accent-ink: #0d0b1f;
  --teal: #2dd4bf;
  --teal-soft: rgba(45, 212, 191, 0.13);
  --amber: #fbbf24;
  --amber-soft: rgba(251, 191, 36, 0.12);

  /* Rückmeldung */
  --ok: #34d399;
  --ok-soft: rgba(52, 211, 153, 0.14);
  --ok-glow: rgba(52, 211, 153, 0.45);
  --bad: #fb7185;
  --bad-soft: rgba(251, 113, 133, 0.14);

  /* Typografie */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.6rem, 4.6vw, 2.3rem);
  --fs-hero: clamp(2rem, 7vw, 3.4rem);

  /* Form */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  --shadow-focus: 0 0 0 3px rgba(139, 124, 255, 0.45);

  /* Abstände */
  --gutter: 16px;
  --gap: 12px;

  /* Bewegung */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 160ms;
  --t-med: 280ms;
  --t-feedback: 320ms;

  /* Tastaturhöhe auf Mobilgeräten (per JS über visualViewport gesetzt) */
  --kb: 0px;
}

@media (min-width: 720px) {
  :root { --gutter: 28px; --gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-med: 1ms; --t-feedback: 1ms; }
}