/* GLAD-O-POLIS 2.0 — Gestaltungswerte.
   Diese Datei ist die einzige Stelle, an der Farben und Schriften definiert werden.
   Im übrigen CSS ausschließlich über var() darauf zugreifen. */

/* Die drei Schriften kommen aus dem eigenen Ordner, nicht von Google.
   Siehe assets/schriften/schriften.css. */
@import url('../assets/schriften/schriften.css');

:root {
  /* Grundflächen */
  --papier:            #F4EFE4;   /* Spielfläche, Seitenhintergrund */
  --papier-hell:       #FBF8F1;   /* Felder, Karten, Dialoge */
  --papier-linie:      #C9BFA8;   /* feine Trennlinien */

  /* Schrift und Konturen */
  --blau:              #1B3A6B;   /* Rahmen, Überschriften, Haupttext */
  --blau-hell:         #3B5580;   /* Sekundärtext, Preise */
  --kontur:            #14243D;   /* SVG-Konturen im Wappen */

  /* Akzente */
  --rot:               #C4342C;   /* Löwe, Wahltag, Warnungen, Ratssitzung */
  --rot-dunkel:        #8F241E;
  --gruen-wappen:      #1E7A3B;   /* Schildgrund im Logo */
  --gold:              #E0B23C;   /* Geweih, Hirsch */
  --gold-krone:        #FCDD09;   /* Krone */
  --messing:           #B8944D;   /* Stadtkasse, Bürgergunst */
  --messing-dunkel:    #8A6D33;

  /* Ortsteilgruppen */
  --gruppe-braun:      #7A5C3E;
  --gruppe-hellblau:   #7FA8C4;
  --gruppe-pink:       #B8608A;
  --gruppe-orange:     #D98A3C;
  --gruppe-rot:        #C4342C;
  --gruppe-gelb:       #D9B93C;
  --gruppe-gruen:      #4F8C5A;
  --gruppe-blau:       #1B3A6B;

  /* Spielerfarben (bis zu 4 Teilnehmer, unterscheidbar auch bei Farbsehschwäche) */
  --spieler-1:         #C4342C;
  --spieler-2:         #1B3A6B;
  --spieler-3:         #4F8C5A;
  --spieler-4:         #B8944D;

  /* Schriften */
  --schrift-titel:     'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --schrift-eng:       'Barlow Condensed', 'Roboto Condensed', system-ui, sans-serif;
  --schrift-text:      'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* Abstände */
  --abstand-xs: 4px;
  --abstand-s:  8px;
  --abstand-m:  16px;
  --abstand-l:  24px;
  --abstand-xl: 40px;

  /* Radien und Rahmen */
  --radius-s:  4px;
  --radius-m:  9px;
  --radius-l:  16px;
  --linie:     1px solid var(--blau);
  --linie-kraeftig: 2px solid var(--blau);

  /* Bewegung */
  --dauer-figur:   120ms;   /* je Feld */
  --dauer-dialog:  180ms;
  --dauer-ki-zug:  900ms;   /* je sichtbarem Schritt, per Vorspulen auf 0 */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dauer-figur: 0ms; --dauer-dialog: 0ms; }
}