/* Farbschemata und Design-Tokens der Musikschul-App.
   Vier Schemata (Rosa/Lila Standard) – Rollen aus der Übergabe.
   Abgeleitete Ink-Töne als rgba(var(--ink-rgb), α): entspricht color-mix(ink X%, transparent),
   läuft aber auch in Safari < 16.2. */
:root, [data-schema="rosa"] {
  --bg: #fdf3f9; --surface: #f7e3f1; --card: #ffffff; --ink: #2a1a2b; --ink-rgb: 42, 26, 43;
  --ac: #c0348a; --ac-d: #96246a; --ac-l: #fbe4f2;
  --ac2: #7c47c9; --ac2-d: #5a2fa0; --ac2-l: #ece2fb;
}
[data-schema="mint"] {
  --bg: #f0f8f3; --surface: #ddeee4; --card: #ffffff; --ink: #14261c; --ink-rgb: 20, 38, 28;
  --ac: #1f8f6a; --ac-d: #146149; --ac-l: #dcf2e8;
  --ac2: #3a7594; --ac2-d: #274f66; --ac2-l: #dcebf2;
}
[data-schema="bernstein"] {
  --bg: #f5ead8; --surface: #ebddc5; --card: #fffaf2; --ink: #201e1d; --ink-rgb: 32, 30, 29;
  --ac: #b2622d; --ac-d: #8c491a; --ac-l: #ffe1d0;
  --ac2: #728157; --ac2-d: #56633f; --ac2-l: #e1eecc;
}
[data-schema="blau"] {
  --bg: #eef3fb; --surface: #dee7f6; --card: #ffffff; --ink: #16203a; --ink-rgb: 22, 32, 58;
  --ac: #2f5fc0; --ac-d: #21458f; --ac-l: #dfe8fa;
  --ac2: #5b53b8; --ac2-d: #403a8c; --ac2-l: #e4e1f8;
}
:root {
  --ink-60: rgba(var(--ink-rgb), .62);
  --ink-50: rgba(var(--ink-rgb), .50);
  --ink-45: rgba(var(--ink-rgb), .45);
  --ink-40: rgba(var(--ink-rgb), .40);
  --ink-35: rgba(var(--ink-rgb), .42);
  --ink-20: rgba(var(--ink-rgb), .20);
  --ink-16: rgba(var(--ink-rgb), .16);
  --ink-12: rgba(var(--ink-rgb), .14);
  --ink-06: rgba(var(--ink-rgb), .06);

  --font-heading: "Caprasimo", "Georgia", serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, Menlo, monospace;

  --t-kicker: 11.5px; --t-mini: 10.5px; --t-11: 11px; --t-12: 12px; --t-sek: 12.5px; --t-13: 13px;
  --t-135: 13.5px; --t-14: 14px; --t-145: 14.5px; --t-std: 15px; --t-17: 17px; --t-18: 18px;
  --t-h2: 26px; --t-h2-28: 28px; --t-h2-30: 30px; --t-h1: 46px;

  --r-pille: 999px; --r-gross: 28px; --r-26: 26px; --r-karte: 24px; --r-22: 22px;
  --r-20: 20px; --r-klein: 18px; --r-16: 16px; --r-14: 14px; --r-mini: 12px;

  --s-4: 4px; --s-6: 6px; --s-8: 8px; --s-10: 10px; --s-12: 12px; --s-14: 14px; --s-16: 16px;
  --s-18: 18px; --s-20: 20px; --s-22: 22px; --s-26: 26px;
  --s-screen: 20px;
  --s-oben: calc(env(safe-area-inset-top, 0px) + 16px);
  --s-tab-unten: calc(118px + env(safe-area-inset-bottom, 0px));

  --schatten-sm: 0 1px 2px rgba(var(--ink-rgb), .14);
  --schatten-md: 0 3px 10px rgba(var(--ink-rgb), .16);
  --schatten-lg: 0 12px 32px rgba(var(--ink-rgb), .22);
  --schatten-schwebend: 0 16px 40px rgba(0, 0, 0, .18);

  --dauer: .18s;
  --tippziel: 44px;
}