/* ============================================================
   colors.css — Design Tokens: Light & Dark Mode
   Als ERSTES Stylesheet einbinden, vor allen anderen.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* ── Basis-Palette ──────────────────────────────────────── */
  --bg:      #fbfaf8;
  --paper:   #ffffff;
  --paper-2: #f4f3ef;
  --ink:     #121212;
  --muted:   rgba(18,18,18,.66);
  --line:    rgba(18,18,18,.12);
  --accent:  #1b4dff;

  /* ── Ink-Opazitäts-Skala ────────────────────────────────── */
  --ink-03: rgba(18,18,18,.03);
  --ink-04: rgba(18,18,18,.04);
  --ink-05: rgba(18,18,18,.05);
  --ink-06: rgba(18,18,18,.06);
  --ink-08: rgba(18,18,18,.08);
  --ink-10: rgba(18,18,18,.10);
  --ink-12: rgba(18,18,18,.12);
  --ink-14: rgba(18,18,18,.14);
  --ink-16: rgba(18,18,18,.16);
  --ink-18: rgba(18,18,18,.18);
  --ink-20: rgba(18,18,18,.20);
  --ink-22: rgba(18,18,18,.22);
  --ink-25: rgba(18,18,18,.25);
  --ink-28: rgba(18,18,18,.28);
  --ink-38: rgba(18,18,18,.38);
  --ink-40: rgba(18,18,18,.40);
  --ink-42: rgba(18,18,18,.42);
  --ink-44: rgba(18,18,18,.44);
  --ink-45: rgba(18,18,18,.45);
  --ink-50: rgba(18,18,18,.50);
  --ink-52: rgba(18,18,18,.52);
  --ink-55: rgba(18,18,18,.55);
  --ink-56: rgba(18,18,18,.56);
  --ink-60: rgba(18,18,18,.60);
  --ink-64: rgba(18,18,18,.64);
  --ink-66: rgba(18,18,18,.66);
  --ink-68: rgba(18,18,18,.68);
  --ink-70: rgba(18,18,18,.70);
  --ink-72: rgba(18,18,18,.72);
  --ink-74: rgba(18,18,18,.74);
  --ink-75: rgba(18,18,18,.75);
  --ink-78: rgba(18,18,18,.78);
  --ink-80: rgba(18,18,18,.80);
  --ink-82: rgba(18,18,18,.82);
  --ink-92: rgba(18,18,18,.92);

  /* ── Akzent-Opazitäts-Skala ─────────────────────────────── */
  --accent-04: rgba(27,77,255,.04);
  --accent-05: rgba(27,77,255,.05);
  --accent-06: rgba(27,77,255,.06);
  --accent-07: rgba(27,77,255,.07);
  --accent-08: rgba(27,77,255,.08);
  --accent-10: rgba(27,77,255,.10);
  --accent-12: rgba(27,77,255,.12);
  --accent-14: rgba(27,77,255,.14);
  --accent-18: rgba(27,77,255,.18);
  --accent-20: rgba(27,77,255,.20);
  --accent-22: rgba(27,77,255,.22);
  --accent-25: rgba(27,77,255,.25);
  --accent-28: rgba(27,77,255,.28);
  --accent-30: rgba(27,77,255,.30);
  --accent-35: rgba(27,77,255,.35);
  --accent-40: rgba(27,77,255,.40);
  --accent-42: rgba(27,77,255,.42);
  --accent-45: rgba(27,77,255,.45);
  --accent-50: rgba(27,77,255,.50);
  --accent-55: rgba(27,77,255,.55);
  --accent-75: rgba(27,77,255,.75);
  --accent-80: rgba(27,77,255,.80);
  --accent-85: rgba(27,77,255,.85);
  --accent-90: rgba(27,77,255,.90);

  /* ── Oberflächen ────────────────────────────────────────── */
  --surface-nav:        rgba(251,250,248,.78);
  --surface-card:       rgba(255,255,255,.82);
  --surface-panel:      rgba(255,255,255,.92);
  --surface-panel-2:    rgba(255,255,255,.78);
  --surface-item:       rgba(255,255,255,.70);
  --surface-btn:        rgba(255,255,255,.72);
  --surface-btn-hover:  rgba(255,255,255,.88);
  --surface-input:      rgba(255,255,255,.85);
  --surface-input-focus:#ffffff;
  --surface-cookie:     rgba(251,250,248,.96);
  --surface-footer:     rgba(255,255,255,.40);

  /* ── Schatten ───────────────────────────────────────────── */
  --shadow:         0 18px 50px rgba(18,18,18,.10);
  --shadow-soft:    0 12px 28px rgba(18,18,18,.08);
  --shadow-banner:  0 -8px 32px rgba(18,18,18,.08);
  --shadow-tooltip: 0 4px 14px rgba(0,0,0,.18);

  /* ── Highlight-Farben ──────────────────────────────────── */
  /* Allgemeine Wörter (grau) */
  --hl-bg:        rgba(18,18,18,.09);
  --hl-border:    rgba(18,18,18,.32);
  --hl-bg-hover:  rgba(18,18,18,.16);
  /* Vokabeln (blau) */
  --hl-vocab-bg:        rgba(27,77,255,.15);
  --hl-vocab-border:    rgba(27,77,255,.55);
  --hl-vocab-bg-hover:  rgba(27,77,255,.26);
  /* Sprechblasen */
  --bubble-left-bg:     rgba(27,77,255,.08);
  --bubble-left-border: rgba(27,77,255,.20);
  --bubble-right-bg:    rgba(18,18,18,.04);
  --bubble-right-border:rgba(18,18,18,.14);
  /* Grammatikkarte */
  --grammar-card-bg:    linear-gradient(135deg, rgba(27,77,255,.08) 0%, rgba(27,77,255,.02) 100%);
  --grammar-card-border:rgba(27,77,255,.50);
  --grammar-form-color: #1b4dff;

  /* ── Body-Gradient ──────────────────────────────────────── */
  --body-gradient:
    radial-gradient(1000px 700px at 18% 4%, rgba(27,77,255,.07), transparent 55%),
    radial-gradient(900px 650px at 92% 0%, rgba(27,77,255,.04), transparent 58%);
}

/* ── Dark Mode ──────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #111110;
    --paper:   #1c1c1a;
    --paper-2: #242422;
    --ink:     #f0ede8;
    --muted:   rgba(240,237,232,.62);
    --line:    rgba(240,237,232,.11);
    --accent:  #6690ff;

    --ink-03: rgba(240,237,232,.03);
    --ink-04: rgba(240,237,232,.04);
    --ink-05: rgba(240,237,232,.05);
    --ink-06: rgba(240,237,232,.06);
    --ink-08: rgba(240,237,232,.08);
    --ink-10: rgba(240,237,232,.10);
    --ink-12: rgba(240,237,232,.12);
    --ink-14: rgba(240,237,232,.14);
    --ink-16: rgba(240,237,232,.16);
    --ink-18: rgba(240,237,232,.18);
    --ink-20: rgba(240,237,232,.20);
    --ink-22: rgba(240,237,232,.22);
    --ink-25: rgba(240,237,232,.25);
    --ink-28: rgba(240,237,232,.28);
    --ink-38: rgba(240,237,232,.38);
    --ink-40: rgba(240,237,232,.40);
    --ink-42: rgba(240,237,232,.42);
    --ink-44: rgba(240,237,232,.44);
    --ink-45: rgba(240,237,232,.45);
    --ink-50: rgba(240,237,232,.50);
    --ink-52: rgba(240,237,232,.52);
    --ink-55: rgba(240,237,232,.55);
    --ink-56: rgba(240,237,232,.56);
    --ink-60: rgba(240,237,232,.60);
    --ink-64: rgba(240,237,232,.64);
    --ink-66: rgba(240,237,232,.66);
    --ink-68: rgba(240,237,232,.68);
    --ink-70: rgba(240,237,232,.70);
    --ink-72: rgba(240,237,232,.72);
    --ink-74: rgba(240,237,232,.74);
    --ink-75: rgba(240,237,232,.75);
    --ink-78: rgba(240,237,232,.78);
    --ink-80: rgba(240,237,232,.80);
    --ink-82: rgba(240,237,232,.82);
    --ink-92: rgba(240,237,232,.92);

    --accent-04: rgba(102,144,255,.04);
    --accent-05: rgba(102,144,255,.05);
    --accent-06: rgba(102,144,255,.06);
    --accent-07: rgba(102,144,255,.07);
    --accent-08: rgba(102,144,255,.08);
    --accent-10: rgba(102,144,255,.10);
    --accent-12: rgba(102,144,255,.12);
    --accent-14: rgba(102,144,255,.14);
    --accent-18: rgba(102,144,255,.18);
    --accent-20: rgba(102,144,255,.20);
    --accent-22: rgba(102,144,255,.22);
    --accent-25: rgba(102,144,255,.25);
    --accent-28: rgba(102,144,255,.28);
    --accent-30: rgba(102,144,255,.30);
    --accent-35: rgba(102,144,255,.35);
    --accent-40: rgba(102,144,255,.40);
    --accent-42: rgba(102,144,255,.42);
    --accent-45: rgba(102,144,255,.45);
    --accent-50: rgba(102,144,255,.50);
    --accent-55: rgba(102,144,255,.55);
    --accent-75: rgba(102,144,255,.75);
    --accent-80: rgba(102,144,255,.80);
    --accent-85: rgba(102,144,255,.85);
    --accent-90: rgba(102,144,255,.90);

    --surface-nav:        rgba(17,17,16,.90);
    --surface-card:       rgba(28,28,26,.94);
    --surface-panel:      rgba(32,32,30,.96);
    --surface-panel-2:    rgba(26,26,24,.90);
    --surface-item:       rgba(30,30,28,.82);
    --surface-btn:        rgba(240,237,232,.08);
    --surface-btn-hover:  rgba(240,237,232,.14);
    --surface-input:      rgba(240,237,232,.07);
    --surface-input-focus:rgba(240,237,232,.12);
    --surface-cookie:     rgba(18,18,16,.97);
    --surface-footer:     rgba(0,0,0,.25);

    --shadow:         0 18px 50px rgba(0,0,0,.40);
    --shadow-soft:    0 12px 28px rgba(0,0,0,.30);
    --shadow-banner:  0 -8px 32px rgba(0,0,0,.22);
    --shadow-tooltip: 0 4px 14px rgba(0,0,0,.55);

    /* ── Highlight-Farben (dark) ──────────────────────────── */
    --hl-bg:        rgba(240,237,232,.13);
    --hl-border:    rgba(240,237,232,.38);
    --hl-bg-hover:  rgba(240,237,232,.22);
    --hl-vocab-bg:        rgba(102,144,255,.22);
    --hl-vocab-border:    rgba(102,144,255,.60);
    --hl-vocab-bg-hover:  rgba(102,144,255,.34);
    --bubble-left-bg:     rgba(102,144,255,.10);
    --bubble-left-border: rgba(102,144,255,.24);
    --bubble-right-bg:    rgba(240,237,232,.05);
    --bubble-right-border:rgba(240,237,232,.14);
    --grammar-card-bg:    linear-gradient(135deg, rgba(102,144,255,.12) 0%, rgba(102,144,255,.04) 100%);
    --grammar-card-border:rgba(102,144,255,.55);
    --grammar-form-color: #6690ff;

    --body-gradient:
      radial-gradient(1000px 700px at 18% 4%, rgba(102,144,255,.06), transparent 55%),
      radial-gradient(900px 650px at 92% 0%, rgba(102,144,255,.04), transparent 58%);
  }
}