/* Pip the Panther - Gestaltungswerte (einzige Quelle: Pip/brand/tokens.css).
   Aenderungen nur hier, danach werkzeuge/brand-sync.ps1 ausfuehren. Nicht in den Kopien aendern. */
:root{
  /* Grundfarben mit Rollen */
  --bg:#171415;        /* Seitenhintergrund */
  --panel:#221D1F;     /* Flaechen auf dem Hintergrund */
  --red:#A9282C;       /* Hauptfarbe, Raster-Flaechen, Hervorhebungen */
  --red-dark:#5E1517;  /* Schatten der Sticker */
  --white:#F6F3F1;     /* Text, Rahmen */
  --muted:#B9AFAD;     /* Nebentext */
  --eye:#9BDB3C;       /* Auge-Gruen: Live, Fokus, Hover */
  --dot:#E7A23A;       /* Punkt-Orange: Rasterpunkte, Hinweise */
  --ink:#0B0909;       /* Sticker-Kontur */
  --dot-blue:#5FB3D9;  /* zweites Blau der Rasterpunkte */

  /* Spielfarben: nur fuer Spiele-Akzente, nie als Markenfarbe. Warp (Darktide) = --eye */
  --chaos:#6E1214;        --chaos-trim:#B08D3A;
  --ultra:#1E4FA3;        --ultra-trim:#E7C14A;
  --quantum:#8CC8FF;

  /* Schrift: Cinzel (imperiale Steininschrift) nur fuer Schlagzeilen und Knoepfe, Barlow fuer alles andere,
     Mono nur fuer Technisches (Handle, Umschalter). Cinzel gibt es hier in 700 und 900. */
  --f-display:"Cinzel","Trajan Pro","Times New Roman",serif;
  --fw-display:700; --fw-display-hero:900;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;

  /* Groessenskala */
  --fs-0:14px; --fs-1:17px; --fs-2:21px;
  --fs-3:clamp(26px,4vw,40px);
  --fs-4:clamp(34px,5.5vw,52px);
  --fs-hero:clamp(84px,17vw,190px);

  /* Abstaende */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:40px;

  color-scheme:dark;
}

/* Rote Rasterpunkt-Flaeche */
.halftone{background-color:var(--red);background-image:radial-gradient(var(--dot) 1px,transparent 1.3px),radial-gradient(var(--dot-blue) 1px,transparent 1.3px);background-size:9px 9px,9px 9px;background-position:0 0,4.5px 4.5px}
/* Sticker: weisser Rahmen, schwarze Kontur, versetzter roter Schatten */
.sticker{position:relative;border:4px solid var(--white);box-shadow:0 0 0 4px var(--ink),8px 8px 0 4px var(--red-dark)}
/* Nieten: vier Metallnieten in den Ecken eines Stickers (Warhammer-Anklang, rein dekorativ) */
.sticker::before{content:"";position:absolute;inset:6px;pointer-events:none;z-index:2;
  background:
    radial-gradient(circle,var(--muted) 0 1.5px,#5A5052 2px 3px,transparent 3.5px) left top/12px 12px no-repeat,
    radial-gradient(circle,var(--muted) 0 1.5px,#5A5052 2px 3px,transparent 3.5px) right top/12px 12px no-repeat,
    radial-gradient(circle,var(--muted) 0 1.5px,#5A5052 2px 3px,transparent 3.5px) left bottom/12px 12px no-repeat,
    radial-gradient(circle,var(--muted) 0 1.5px,#5A5052 2px 3px,transparent 3.5px) right bottom/12px 12px no-repeat}
/* Siegel-Linie: Trennlinie mit Raute in der Mitte, statt einfacher Linie vor dem Fussbereich */
.seal{height:14px;margin:0;border:0;background:linear-gradient(var(--red),var(--red)) center/100% 3px no-repeat;position:relative}
.seal::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;transform:rotate(45deg);background:var(--bg);border:3px solid var(--white);box-shadow:0 0 0 3px var(--bg)}