/* ============================================================
   iPii.TV Showcase — kanonisches Design-Tokens-Set.
   Konsolidiert aus 3 vorher unabhängigen :root-Bloecken (css/pages.css,
   hub.html, index.html), die trotz fast identischer Werte unterschiedliche
   Namen/Skalen nutzten (--x* vs --sp-*, --fs-hero vs --fs-display) — keine
   einzige Quelle der Wahrheit fuer Tokens. Diese Datei ist jetzt DIE Quelle;
   alle 5 Showcase-Seiten laden sie vor ihrer eigenen Seiten-CSS.
   Werte-Basis: pages.css/hub.html (waren sich am naehsten, von den meisten
   Seiten geteilt). index.html-Erweiterungen (feinere Typo-Stufen, Light-Mode)
   wurden aufgenommen, NICHT verworfen — sie sind fuer neue Seiten (z.B.
   login.html) nuetzlich, laufen aber unter denselben Kern-Farbwerten.
   ============================================================ */
: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, aus index.html uebernommen) */
  --light-canvas:#f5f5f7;
  --light-base:#ffffff;
  --light-ink:#1d1d1f;
  --light-ink-2:#3a3a3c;
  --light-hair:rgba(0,0,0,.10);

  /* Spacing — 8px-Grid (--x*, kanonisch aus pages.css, vollstaendige Skala) */
  --x:8px; --x2:16px; --x3:24px; --x4:32px; --x5:40px; --x6:48px; --x8:64px; --x10:80px; --x12:96px;
  --gut:clamp(22px,5vw,72px);   /* Sektions-Gutter als ein Token */
  --sec:clamp(56px, 6.5vw, 96px);  /* Standard-Sektions-Padding (aus index.html) */

  /* Spacing — 4px-Grid (--sp-*, aus index.html, fuer 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 (pages.css/hub.html) */
  --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 (aus index.html uebernommen, fuer neue Seiten
     wie login.html nuetzlich; ersetzen die Kern-Skala oben NICHT) */
  --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);
  /* Apple-Cine-Easing — NUR fuer Hero-/Media-Reveals + Geraete-/Tab-Wechsel */
  --ease-cine:cubic-bezier(.25,.46,.45,.94);
  --dur:.55s;
}