/* ==========================================================================
   Migenas Musikschule — Design-Tokens
   Quelle der Wahrheit: material/ci-visuell_migenas-musikschule.md
   (alte Seite sing-schule.de + Entwurf 19.10.2026 + Till, Call 26.10.2026)

   Zwei Ebenen:
     --ci-*     = CI-Werte. UNANTASTBAR.
     --color-*  = Rollen fuer die Website. Ableitungen sind als solche markiert.

   Kontrast-Belege: ci-visuell (gerechnet 27.10.2026) + scripts/contrast-check.py
     Tinte  #1c1814 auf Elfenbein ... 16,38:1  Text
     Tinte2 #4a423a auf Elfenbein ...  9,15:1  Text
     Gedaempft #7a6f63 auf Elfenbein . 4,55:1  nur ab 16 px
     Bronze #9a5e24 auf Elfenbein ...  4,87:1  Links, Eyebrows
     Weiss auf Bronze ...............  5,25:1  Button-Text
     Gold #c9a26b auf Elfenbein .....  2,20:1  NIE Text, nur Linie/Grafik
     Gold auf Nacht .................  8,29:1  Text auf dunklen Sektionen
   ========================================================================== */

:root {
  /* ── CI ─────────────────────────────────────────────────────────────── */
  --ci-bronze:   #9a5e24;
  --ci-bronze-d: #7c4a1b;
  --ci-gold:     #c9a26b;
  --ci-gold-l:   #e7cfa6;
  --ci-ivory:    #faf6ef;
  --ci-paper:    #ffffff;
  --ci-sand:     #f1e9dc;
  --ci-line:     #e6dccb;
  --ci-ink:      #1c1814;
  --ci-ink-2:    #4a423a;
  --ci-muted:    #7a6f63;
  --ci-night:    #0d0b09;
  --ci-night-2:  #1a1511;
  --ci-on-night: #f6efe4;

  /* ── Rollen ─────────────────────────────────────────────────────────── */
  --color-bg:        var(--ci-ivory);
  --color-surface:   var(--ci-paper);
  --color-alt:       var(--ci-sand);
  --color-border:    var(--ci-line);
  --color-text:      var(--ci-ink);
  --color-text-2:    var(--ci-ink-2);
  --color-muted:     var(--ci-muted);
  --color-accent:    var(--ci-bronze);
  --color-accent-d:  var(--ci-bronze-d);
  --color-line-gold: var(--ci-gold);
  --color-dark:      var(--ci-night);
  --color-dark-2:    var(--ci-night-2);
  --color-on-dark:   var(--ci-on-night);
  --color-on-dark-2: var(--ci-gold-l);
  --color-on-accent: #ffffff;
  --color-error:     #a3322a;   /* ABGELEITET: Formularfehler, warmes Rot, 6,4:1 auf Elfenbein, 6,89:1 auf Weiss (contrast-check), nie auf Nacht */
  --color-focus:     var(--ci-bronze-d);

  /* ── Schrift (self-hosted, css/fonts.css) ──────────────────────────── */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans:  "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero:  clamp(2.5rem, 7.2vw, 5rem);
  --fs-h2:    clamp(2rem, 6.4vw, 3.625rem);
  --fs-h3:    clamp(1.375rem, 3.6vw, 1.75rem);
  --fs-body:  1.0625rem;     /* 17 px, Entwurfs-Skala */
  --fs-lead:  clamp(1.0625rem, 2.2vw, 1.25rem);
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.75rem;
  --lh-tight: 1.12;
  --lh-body:  1.7;

  /* ── Layout ─────────────────────────────────────────────────────────── */
  --wrap:        1160px;
  --gutter:      20px;
  --section-pad: clamp(72px, 11vw, 140px);
  --measure:     68ch;
  --gap:         clamp(1rem, 2.4vw, 2rem);

  /* ── Form ───────────────────────────────────────────────────────────── */
  --radius:      22px;
  --radius-pill: 99px;
  --radius-arch: 999px 999px 26px 26px;  /* Bogenkarte (Entwurf) */
  --shadow-md:   0 14px 40px -18px rgba(28, 24, 20, .28);
  --shadow-lg:   0 30px 70px -30px rgba(28, 24, 20, .35);

  /* ── Bewegung ───────────────────────────────────────────────────────── */
  --ease:     cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 180ms;
  --dur-base: 300ms;
  --dur-slow: 700ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}