/* ============================================================
   ZINGERLE AUDIO — Design Tokens v1
   ------------------------------------------------------------
   Kopie aus dem zentralen Design-System — NICHT hier editieren.
   Quelle der Wahrheit:
     08_Claude_Project_zingerle-audio/design-system/zingerle-tokens.css
   Version:  v1
   Stand:    2026-07-10
   Doku:     ZINGERLE-AUDIO-DESIGN-SYSTEM.md
   Änderungen bitte zuerst in der Quelle machen, dann hierher spiegeln.
   ============================================================ */

/* ---- Fonts (self-hosted, WOFF2 nach assets/fonts/ legen) ----
   Die Dateien besorgt Tom (Google Fonts → WOFF2, self-hosted,
   KEIN CDN). Solange sie fehlen, greifen die Fallback-Stacks
   in --za-font-*. Datei-Liste: assets/fonts/FONTS-README.md
   ---------------------------------------------------------------- */
@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-Medium.woff2")   format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/SpaceGrotesk-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter";         src: url("fonts/Inter-Regular.woff2")         format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter";         src: url("fonts/Inter-Medium.woff2")          format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter";         src: url("fonts/Inter-SemiBold.woff2")        format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Regular.woff2")   format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/IBMPlexMono-Medium.woff2")    format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* Farbe — Basis */
  --za-bg:            #100e0b;
  --za-surface-1:     #1a1713;
  --za-surface-2:     #221e18;
  --za-surface-3:     #2c2820;

  --za-line:          rgba(235, 225, 204, 0.12);
  --za-line-strong:   rgba(235, 225, 204, 0.22);
  --za-line-soft:     rgba(235, 225, 204, 0.07);

  --za-text:          #f3ead6;
  --za-text-muted:    rgba(243, 234, 214, 0.72);
  --za-text-faint:    rgba(243, 234, 214, 0.50);

  /* Farbe — Marke/Aktion */
  --za-accent:        #c8a662;
  --za-accent-bright: #d8b876;
  --za-accent-ink:    #15100a;
  --za-accent-soft:   rgba(200, 166, 98, 0.32);
  --za-accent-glow:   rgba(200, 166, 98, 0.16);

  /* Farbe — Funktion (warm abgestimmt) */
  --za-ok:            #8fbf7f;
  --za-warn:          #d6a96a;
  --za-danger:        #c25b5b;
  --za-info:          #8fa8bf;

  /* Typografie */
  --za-font-display:  "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --za-font-body:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  --za-font-mono:     "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* Skala 1.25, Basis 16 */
  --za-fs-xs:   12px;
  --za-fs-sm:   13px;
  --za-fs-md:   16px;
  --za-fs-lg:   20px;
  --za-fs-xl:   25px;
  --za-fs-2xl:  31px;
  --za-fs-3xl:  39px;
  --za-fs-4xl:  49px;
  --za-fs-5xl:  61px;

  --za-track-label: 0.18em;   /* Eyebrows/Badges, uppercase */
  --za-track-h1:   -0.02em;

  /* Raum (4pt) */
  --za-sp-1: 4px;  --za-sp-2: 8px;  --za-sp-3: 12px; --za-sp-4: 16px;
  --za-sp-5: 24px; --za-sp-6: 32px; --za-sp-7: 48px; --za-sp-8: 64px;
  --za-sp-9: 96px;

  /* Radius */
  --za-radius-sm: 2px;
  --za-radius:    4px;
  --za-radius-lg: 6px;

  /* Layout */
  --za-max-w:        1180px;
  --za-max-w-narrow: 880px;

  /* Bewegung */
  --za-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --za-dur-fast:  120ms;
  --za-dur:       220ms;
}