/* ============================================================
   iPii.TV -- kanonisches Design-Tokens-Set (Live-Rollout 2026-07-01).
   1:1 aus dem Showcase (ipii-tv-benchmark/css/tokens.css) uebernommen --
   diese Datei wird von den Live-Modulen home/settings/player als erste
   Rollout-Runde eingebunden, weitere Module folgen nach Bewertung des Piloten.
   WICHTIG: nur ASCII-Zeichen in Kommentaren -- der Server liefert diese Datei
   ohne charset=utf-8 im Content-Type-Header aus; Mehrbyte-UTF-8-Zeichen wie
   Gedankenstriche wurden dadurch vom Browser als Latin-1 fehlinterpretiert,
   was CSS-Custom-Properties direkt nach dem betroffenen Kommentar im selben
   Deklarationsblock unsichtbar verwarf (--ds-brand-mark loeste zu "" auf).
   ============================================================ */
:root{
  /* Farben (Zwei-Rot-System, kanonisch) */
  --mark:#b3362f;            /* NUR roter Logo-Balken */
  --cta:#8a1d1d;             /* Aktionen/CTA-Flaechen -- NIE Textfarbe */
  --cta-hover:#a52525;
  --ink-red:#d96a5f;         /* einziges Rot als Text auf Dunkel */
  --soft:rgba(138,29,29,.14);
  --glow:rgba(138,29,29,.28);

  --white:#FDF3F3;           /* warm-weiss (Logo) */
  --black:#0C0C0C;
  --canvas:#070605;          /* Hauptbuehne */
  --base:#0c0c0c;            /* Karten-Basis */
  --surface:#141416;         /* leicht erhabene Flaeche */
  --ink:#FDF3F3;
  --ink-dim:rgba(253,243,243,.66);
  --ink-faint:rgba(253,243,243,.38);
  --ink-3:rgba(255,255,255,.70);
  --ink-4:rgba(255,255,255,.42);
  --line:rgba(253,243,243,.12);
  --line-2:rgba(253,243,243,.06);
  --hair:rgba(255,255,255,.08);
  --hair-2:rgba(255,255,255,.14);

  /* Tiefen-Ebenen (abgestufte Space-Black-Stufen statt monotonem Canvas) */
  --bg-0:#040303; --bg-1:#070605; --bg-2:#0c0a09; --bg-3:#100d0c;
  --tint:rgba(20,16,15,.45);

  /* Light-Section (Apple-Hell/Dunkel-Wechsel) */
  --light-canvas:#f5f5f7;
  --light-base:#ffffff;
  --light-ink:#1d1d1f;
  --light-ink-2:#3a3a3c;
  --light-hair:rgba(0,0,0,.10);

  /* Spacing -- 8px-Grid */
  --x:8px; --x2:16px; --x3:24px; --x4:32px; --x5:40px; --x6:48px; --x8:64px; --x10:80px; --x12:96px;
  --gut:clamp(22px,5vw,72px);
  --sec:clamp(56px, 6.5vw, 96px);

  /* Spacing -- 4px-Grid (feinere Layouts) */
  --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px;
  --sp-12:48px; --sp-16:64px; --sp-24:96px; --sp-40:160px;

  /* Radien */
  --r-pill:999px; --r-2x:16px; --r-3x:24px;
  --r-card:24px; --r-hero:28px; --r-btn:14px;

  /* Typo -- Kern-Skala */
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --fs-hero:clamp(46px,9.5vw,108px);
  --fs-h2:clamp(32px,5vw,58px);
  --fs-cta:clamp(36px,6.5vw,80px);

  /* Typo -- feinere Zusatz-Stufen */
  --fs-display:clamp(3.25rem, 1.7rem + 6.6vw, 6.5rem);
  --fs-h1:clamp(2.4rem, 1.5rem + 3.8vw, 4.25rem);
  --fs-h3:clamp(1.2rem, 1rem + .9vw, 1.55rem);
  --fs-lead:clamp(1.06rem, .98rem + .5vw, 1.35rem);
  --fs-body:1.0625rem;
  --fs-cap:.9375rem;
  --fs-label:.75rem;

  --maxw:1180px;
  --container:1200px;
  --measure:64ch;

  /* Motion */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --ease-cine:cubic-bezier(.25,.46,.45,.94);
  --dur:.55s;

  /* Kompatibilitaets-Alias fuer bestehende ds-Variablen-Referenzen.
     settings-redesign skin.css und player-redesign skin.css nutzen bereits ein
     ds-praefixiertes Schema, naeher am neuen System als homes altes brand
     Schema. Damit ihre Klassen switch card field-input etc beim Rollout
     unveraendert funktionieren, werden nur die Variablen-Definitionen hierher
     verlagert, die lokalen root-Bloecke in skin.css werden entfernt, die
     Referenzen im restlichen CSS bleiben unveraendert. Vollstaendigkeit
     gegen den tatsaechlichen settings-skin.css root Block verifiziert. */
  --ds-brand-mark:var(--mark);
  --ds-brand-cta:var(--cta);
  --ds-brand-hover:var(--cta-hover);
  --ds-brand-soft:var(--soft);
  --ds-brand-glow:var(--glow);
  --ds-canvas:var(--canvas);
  --ds-base:var(--base);
  --ds-elevated:rgba(255,255,255,.03);
  --ds-text:var(--ink);
  --ds-text-2nd:#e7e7e7;
  --ds-text-3rd:rgba(255,255,255,.7);
  --ds-text-4th:rgba(255,255,255,.5);
  --ds-tint:var(--ink-red);
  --ds-tint-soft:rgba(217,106,95,.55);
  --ds-success:#36d399;
  --ds-warning:#f0b440;
  --ds-error:#f87171;
  --ds-info:#5e9eff;
  --ds-live:var(--mark);
  --ds-hairline:var(--line);
  --ds-hairline-hov:rgba(255,255,255,.14);
  --ds-radius-card:16px;
  --ds-radius-overlay:24px;
  --ds-radius-input:12px;
  --ds-radius-button:12px;
  --ds-radius-tag:8px;
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}