/* =============================================================
   tokens.css — zentrale Design-Variablen
   Hier und nur hier werden Farben, Abstände und Zeiten definiert.
   Wer das Aussehen ändern will, ändert diese Datei.

   Grundhaltung: neutrales Schwarz als Bühne, Farbe ausschließlich
   als Akzent. Farbverläufe nur dort, wo sie einen Zweck haben
   (Abdunkeln von Bildern), nicht als Dekoration.

   Die beiden Akzentfarben stammen aus dem Logo (gemessen: linke
   Hälfte Farbton 260°, rechte Hälfte 0°) und haben feste Rollen:
     Lila = Struktur und Navigation – wo bin ich, was ist ausgewählt
     Rot  = Aktion – herunterladen, melden, Fortschritt
   Diese Trennung nicht aufweichen, sonst wird es beliebig.
   ============================================================= */

:root {
  /* --- Bühne / Hintergründe ------------------------------------ */
  --bg-void:        #0A0A0C;   /* tiefster Hintergrund */
  --bg-deep:        #0D0D10;   /* Seitenhintergrund */
  --bg-raised:      #131317;   /* leicht abgehobene Fläche */
  --bg-panel:       #16161A;   /* Karten, Panels */
  --bg-panel-hi:    #1D1D22;   /* Panel im Hover */
  --bg-overlay:     rgba(10, 10, 12, .82);

  /* --- Akzent 1: Lila = Struktur, Navigation, Auswahl ----------- */
  --accent:         #8B5CF6;
  --accent-deep:    #6D28D9;
  --accent-bright:  #A78BFA;
  --accent-pale:    #C4B5FD;
  --accent-ink:     #1E1730;   /* sehr dunkles Lila für Flächen */
  --accent-wash:    rgba(139, 92, 246, .10);

  /* --- Akzent 2: Rot = Aktion (Download, Melden, Fortschritt) ---
     --red trägt weißen Text (Kontrast 5,2:1), --red-bright ist für
     Text und Linien auf dunklem Grund gedacht. */
  --red:            #D62839;
  --red-deep:       #A31A28;
  --red-bright:     #F0555F;
  --red-pale:       #FCA5AC;
  --red-wash:       rgba(214, 40, 57, .10);
  --red-line:       rgba(240, 85, 95, .35);

  /* --- Text ----------------------------------------------------- */
  --text:           #E8E8EC;
  --text-soft:      #B8B8C0;
  --text-muted:     #8E8E98;
  --text-faint:     #63636D;

  /* --- Ränder & Trenner (neutral, nicht eingefärbt) ------------- */
  --line:           rgba(255, 255, 255, .08);
  --line-strong:    rgba(167, 139, 250, .32);
  --line-neutral:   rgba(255, 255, 255, .07);

  /* --- Signalfarben -------------------------------------------- */
  --ok:             #5DD48F;
  --warn:           #E3B341;
  --danger:         var(--red-bright);
  --info:           #6BA5E7;

  /* --- Schatten ------------------------------------------------- */
  --shadow-sm:      0 2px 6px rgba(0, 0, 0, .35);
  --shadow-md:      0 8px 24px rgba(0, 0, 0, .45);
  --shadow-lg:      0 24px 60px rgba(0, 0, 0, .6);
  /* Hervorhebung: heller Rand plus Tiefe, kein farbiges Leuchten */
  --lift:           0 0 0 1px rgba(167, 139, 250, .30), 0 16px 36px rgba(0, 0, 0, .55);
  --lift-soft:      0 0 0 1px rgba(255, 255, 255, .10), 0 6px 18px rgba(0, 0, 0, .4);

  /* --- Radien --------------------------------------------------- */
  --r-xs:  5px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-pill: 999px;

  /* --- Abstände (8er-Raster) ----------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;

  /* Seitenrand: wächst mit dem Viewport, wie bei Netflix */
  --gutter: clamp(16px, 4vw, 60px);
  --row-gap: clamp(14px, 1.4vw, 22px);

  /* --- Typografie ----------------------------------------------- */
  --font-display: "Outfit", "Segoe UI Variable Display", "Segoe UI", system-ui,
                  -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, monospace;

  /* Der Kopfbereich ist nur noch gut 500 px hoch – eine 64-px-Überschrift
     würde ihn erschlagen. Rund 50 px sind dort das Maximum. */
  --fs-hero:   clamp(2rem, 3.4vw, 3.1rem);
  --fs-h1:     clamp(1.6rem, 2.4vw, 2.1rem);
  --fs-h2:     clamp(1.2rem, 1.5vw, 1.55rem);
  --fs-h3:     clamp(1rem, 1.3vw, 1.15rem);
  --fs-body:   clamp(0.95rem, 1.05vw, 1.02rem);
  --fs-card:   clamp(0.95rem, 1.1vw, 1.05rem);   /* Titel auf den Karten */
  --fs-sm:     0.875rem;
  --fs-xs:     0.78rem;

  --lh-tight: 1.15;
  --lh-snug:  1.4;
  --lh-body:  1.65;

  /* --- Bewegung -------------------------------------------------- */
  --t-fast:   130ms;
  --t-base:   240ms;
  --t-slow:   420ms;
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-inout:  cubic-bezier(.65, 0, .35, 1);

  /* --- Ebenen (z-index) ----------------------------------------- */
  --z-bg:       0;
  --z-content:  10;
  --z-row-card: 20;
  --z-header:   60;
  --z-overlay:  80;
  --z-palette:  90;
  --z-lightbox: 95;
  --z-toast:   100;

  /* --- Kartenmaße ------------------------------------------------
     Querformat und großzügig: bei einer überschaubaren Zahl von
     Programmen wirken kleine Kacheln verloren. */
  --card-w: clamp(260px, 26vw, 400px);
  --card-ratio: 3 / 2;
}

/* Wer im Betriebssystem "Bewegung reduzieren" aktiviert hat,
   bekommt eine ruhige Variante — alle Zeiten praktisch auf null. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-base: 1ms;
    --t-slow: 1ms;
  }
}