/* ===========================================================================
   Pixel WG — Design-Tokens  v2.0
   Grundlage: Brand Styleguide v1.0
   Zwei Werte wurden gegenüber dem Styleguide korrigiert, weil sie durch die
   Lesbarkeitsprüfung gefallen sind. Beide Stellen sind unten kommentiert.

   Regel: In der Seite stehen keine Farbwerte. Nur var(--...).
   =========================================================================== */

:root {
  /* --- Grundflächen ------------------------------------------------------ */
  --bg:            #13121A;   /* Grundfarbe, ca. 60 % der Fläche */
  --surface:       #1E1A28;   /* Karten, Kopfzeile, Dropdowns */
  --surface-2:     #2A2438;   /* Flächen auf Flächen, Eingabefelder */
  --border:        #3A324A;   /* dekorative Trennlinien */
  --border-strong: #6A5B87;   /* Rahmen, die ein Bedienelement abgrenzen
                                 (Ghost-Button, Eingabefeld). 3,06:1 auf --bg,
                                 damit der Rahmen überhaupt sichtbar ist. */

  /* --- Text -------------------------------------------------------------- */
  --text:      #F1EEF7;       /* 16,2:1 auf --bg */
  --text-dim:  #9590A9;       /* KORRIGIERT. Styleguide: #6B6583 = 3,38:1 auf
                                 --bg und 2,71:1 auf --surface-2, damit unter
                                 der Grenze von 4,5:1 für Fließtext.
                                 Dieser Wert: 6,06 / 5,54 / 4,86:1. */
  --text-muted: #6B6583;      /* der Styleguide-Wert, aber NUR für Nicht-Text:
                                 deaktivierte Zustände, Zierlinien, Icons
                                 neben lesbarer Beschriftung. Nie für Fließtext. */
  --text-on-accent: #13121A;  /* KORRIGIERT. Schrift auf gefüllter Akzentfläche.
                                 Weiß auf --brand ergibt 2,95:1 (durchgefallen),
                                 dunkel ergibt 5,50:1. Gilt für alle Akzente. */

  /* --- Marke und Kategorien --------------------------------------------- */
  --brand:       #A86BFF;     /* nur Logo, Primärknopf, ein Akzentwort */
  --brand-ink:   #8B45F5;     /* dieselbe Marke, gedrückter Zustand */
  --brand-hover: #C39BFF;     /* Marke als Text im Überfahren-Zustand.
                                 8,37:1 auf --bg, 7,66:1 auf --surface. */
  --brand-soft:  #312546;     /* leiser Markenton als Hintergrund (14 % Marke
                                 auf --surface). Trägt --text und
                                 --brand-hover sicher. */
  --bg-bar:      #1E1A28;     /* Fläche der Kopfzeile */
  --error:       #FF5247;     /* Fehler und Abmelden. Identisch mit --c-live:
                                 dieselbe Bedeutung "Achtung", eine Farbe. */
  --c-live:     #FF5247;      /* Wer ist live */
  --c-wg:       #21D4DA;      /* Die WG */
  --c-news:     #7689FF;      /* Pixel News */
  --c-events:   #FF8ACB;      /* Events */
  --c-deals:    #FFC53D;      /* Deals */

  /* Fremdmarken: nur für das jeweilige Plattform-Logo im Footer, nirgends sonst. */
  --p-instagram: #E1306C;
  --p-twitch:    #9146FF;
  /* Grund hinter Produktfotos (Deals), deren Bilder selbst weißen Hintergrund haben. */
  --p-img-bg:    #FFFFFF;

  /* Farbverteilung als Richtwert, kein Gesetz:
     60 % Grundfarbe · 15 % Marke · 10 % Live · 10 % Die WG
     · 5 % News · 5 % Events · 5 % Deals
     Wenn eine Seite bunter wirkt als diese Verteilung, ist sie zu bunt. */

  /* --- Schrift ----------------------------------------------------------- */
  /* Satoshi über Fontshare, die anderen beiden über Google Fonts.
     Achtung Lizenz: Satoshi darf nicht als Datei weitergegeben werden
     (kein woff2 in einem öffentlichen Repo). Über die Fontshare-CSS einbinden. */
  --f-display: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-ui:      'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-label:   'Orbitron', 'Space Grotesk', ui-monospace, monospace;
  /* Echte Schreibmaschinenschrift für Konsolen und Befehle. Orbitron hat keine
     festen Zeichenbreiten und taugt dafür nicht. Kommt vom System, lädt nichts. */
  --f-mono:    ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* Typenskala. Fließtext bleibt 16px, darunter wird nichts gelesen. */
  --t-hero:  clamp(2.25rem, 6vw, 4rem);     /* Startseiten-Aussage */
  --t-h1:    clamp(1.875rem, 4vw, 2.75rem);
  --t-h2:    clamp(1.375rem, 2.6vw, 1.875rem);
  --t-h3:    1.25rem;
  --t-body:  1rem;
  --t-small: 0.875rem;
  --t-label: 0.6875rem;                     /* nur Versalien mit Sperrung */

  --lh-tight: 1.05;
  --lh-head:  1.15;
  --lh-body:  1.6;
  --ls-label: 0.14em;

  /* --- Abstände: 4er-Schritte ------------------------------------------- */
  --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;

  /* --- Form -------------------------------------------------------------- */
  --r-pixel: 4px;    /* Logo-Pixel, kleine Marker */
  --r-btn:   8px;
  --r-card:  12px;
  --r-pill:  999px;

  --shadow-card: 0 2px 8px rgb(0 0 0 / 0.30);
  --shadow-pop:  0 8px 28px rgb(0 0 0 / 0.45);

  /* --- Bewegung ---------------------------------------------------------- */
  --e-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast:  150ms;
  --d-base:  220ms;

  /* --- Maße -------------------------------------------------------------- */
  --w-page:  1200px;
  --w-text:  68ch;     /* Lesebreite für Fließtext */
  --h-header: 64px;
  --tap:     44px;     /* Mindestgröße für alles Anklickbare */
}

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