/* Vier Themes: dark/light × hc (Hoher Kontrast) / loose (Locker). Schrift über data-size. */
:root {
  --font: -apple-system, "SF Pro Text", "SF Pro", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-round: "SF Pro Rounded", ui-rounded, var(--font);
  --r-card: 26px; --r-pill: 999px; --r-chip: 14px;
  --tap: 48px;              /* iOS-Standard: 44pt Mindestfläche */
  --bar-h: 64px;
  --dock-h: 80px;
  --gutter: 16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --fs: 1;
}
[data-size="normal"] { --fs: 1; }
[data-size="large"]  { --fs: 1.12; }
[data-size="stage"]  { --fs: 1.25; }

/* ---------- Dunkel · Hoher Kontrast ---------- */
[data-mode="dark"][data-style="hc"] {
  color-scheme: dark;
  --bg: #000; --fg: #fff; --fg-2: #fff; --fg-3: #fff;
  --surface: #000; --surface-2: #000;
  --line: #fff; --line-w: 1px;
  --accent: #ffd60a; --on-accent: #000; --accent-line: #ffd60a;
  --glass: #000; --glass-line: #fff; --glass-blur: 0px;
  --badge-bg: #000; --badge-fg: #fff; --badge-line: #fff;
  --shadow: none; --shadow-pop: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.14);
}
/* ---------- Hell · Hoher Kontrast ---------- */
[data-mode="light"][data-style="hc"] {
  color-scheme: light;
  --bg: #fff; --fg: #000; --fg-2: #000; --fg-3: #000;
  --surface: #fff; --surface-2: #fff;
  --line: #000; --line-w: 1px;
  --accent: #000; --on-accent: #fff; --accent-line: #000;
  --glass: #fff; --glass-line: #000; --glass-blur: 0px;
  --badge-bg: #fff; --badge-fg: #000; --badge-line: #000;
  --shadow: none;
}
/* ---------- Dunkel · Locker ---------- */
[data-mode="dark"][data-style="loose"] {
  color-scheme: dark;
  --bg: #08100f; --fg: #f2f7f6; --fg-2: #bfd0cd; --fg-3: #86a09c;
  --surface: #111c1b; --surface-2: #17282680;
  --line: rgba(255,255,255,.12); --line-w: 1px;
  --accent: #004e4a; --on-accent: #fff; --accent-line: #004e4a;
  --glass: rgba(30,44,48,.62); --glass-line: rgba(255,255,255,.18); --glass-blur: 28px;
  --badge-bg: rgba(255,255,255,.1); --badge-fg: #fff; --badge-line: rgba(255,255,255,.22);
  --shadow: 0 12px 40px rgba(0,0,0,.45);
}
/* ---------- Hell · Locker ---------- */
[data-mode="light"][data-style="loose"] {
  color-scheme: light;
  --bg: #eef4f3; --fg: #10201f; --fg-2: #3d5654; --fg-3: #7a8f8d;
  --surface: #ffffff; --surface-2: #f7f7fb;
  --line: rgba(0,0,0,.1); --line-w: 1px;
  --accent: #004e4a; --on-accent: #fff; --accent-line: #004e4a;
  --glass: rgba(255,255,255,.66); --glass-line: rgba(255,255,255,.9); --glass-blur: 28px;
  --badge-bg: rgba(0,0,0,.05); --badge-fg: #1c1c1e; --badge-line: rgba(0,0,0,.12);
  --shadow: 0 12px 40px rgba(60,60,90,.16);
}

/* Popover-Schatten (Suchliste) je Modus */
[data-mode="light"] { --shadow-pop: 0 18px 50px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.08); }
[data-mode="dark"][data-style="loose"] { --shadow-pop: 0 18px 50px rgba(0,0,0,.55); }

/* ---------- Akzentfarbe im Kontrast-Stil (Einstellungen: 3 Kreise) ---------- */
[data-style="hc"][data-accent="yellow"] { --accent: #ffd60a; --on-accent: #000; --accent-line: #ffd60a; }
[data-style="hc"][data-accent="red"]    { --accent: #ff3b30; --on-accent: #000; --accent-line: #ff3b30; }
[data-style="hc"][data-accent="green"]  { --accent: #004e4a; --on-accent: #fff; --accent-line: #004e4a; }

/* ---------- Abschnittsfarben: feste Zuordnung je Typ, überall gleich, abgegraute Töne ---------- */
:root, [data-mode="dark"] {
  --sec-intro: #8fb0d6;   /* Blaugrau */
  --sec-verse: #86bf92;   /* Salbei */
  --sec-pre:   #d2b36c;   /* Sand */
  --sec-chorus:#e0907c;   /* Koralle */
  --sec-bridge:#b49bd8;   /* Flieder */
  --sec-inst:  #6fc0bb;   /* Petrol hell */
  --sec-outro: #9aa1b8;   /* Schiefer */
  --sec-other: #9aa1b8;
}
[data-mode="light"] {
  --sec-intro: #3b6aa0;
  --sec-verse: #2f7a45;
  --sec-pre:   #8a6a14;
  --sec-chorus:#b04632;
  --sec-bridge:#6b4a9c;
  --sec-inst:  #1f7a76;
  --sec-outro: #5b6380;
  --sec-other: #5b6380;
}

/* Dezenter grüner Schein im Kopf der Editor-Panels (läuft nach oben schnell in die Panel-Farbe aus) */
:root, [data-mode="dark"] { --panel-glow: rgba(0, 120, 112, .32); }
[data-mode="light"] { --panel-glow: #cfeee9; }