/* ==========================================================
   Marek Wintels – Design Tokens
   Quelle: referenz/marekwintels-aktuell/brand-brief.md
   Pixel-Ästhetik + Brutalismus: scharfe Kanten, dicke Konturen,
   versetzte Schatten. Wer die Marke anpasst, ändert NUR diese
   Datei (Deko-Feinheiten stehen in zusatz.css).
   ========================================================== */
:root {
  color-scheme: light;

  /* Neutrale Basis */
  --c-grundierung: #F5F1E8;   /* Cream – Seitenhintergrund */
  --c-klarlack:    #FDFBF7;   /* Off-White – Karten, Formulare */
  --c-anthrazit:   #3D3931;   /* Charcoal – Text, Rahmen */
  --c-graphit:     #8B8072;   /* Warm Gray – Nebentext */
  --c-linie:       #D9CDB8;   /* Sand – Trennlinien, Mini-Boxen */

  /* Signalfarbe */
  --c-primaer:      #D17456;  /* Terracotta */
  --c-primaer-tief: #B85C3E;  /* Dark Terracotta – Schatten-Versatz, Hover */
  --c-auf-primaer:  #FDFBF7;

  --c-erfolg: #4C8C5C;
  --c-fehler: #C1483F;
  --c-nacht:     #3D3931;     /* Footer – bleibt in jedem Modus dunkel */
  --c-auf-nacht: #E8DFD0;

  /* Schrift: drei Rollen statt einer */
  --font:             'Space Mono', ui-monospace, Menlo, monospace;          /* Fließtext */
  --font-ueberschrift: 'Chakra Petch', 'Space Mono', sans-serif;             /* Überschriften, Buttons, Labels */
  --font-akzent:       'Press Start 2P', 'Chakra Petch', cursive;            /* Wortmarke, Badges, sparsam einsetzen */

  --fs-xs: 0.8rem;
  --fs-s:  0.9rem;
  --fs-m:  1.0625rem;
  --fs-l:  1.25rem;
  --fs-xl: 1.6rem;
  --fs-2xl: 2.1rem;
  --fs-3xl: 2.6rem;

  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;    --s-8: 4.5rem;

  /* Brutalismus: keine Rundungen */
  --r-klein: 0px;
  --maxw: 75rem;
  --textw: 42rem;
}

@media (min-width: 48rem) {
  :root { --fs-xl: 1.85rem; --fs-2xl: 2.7rem; --fs-3xl: 3.4rem; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-grundierung: #211F1B;
    --c-klarlack:    #2B2823;
    --c-anthrazit:   #F0EBE1;
    --c-graphit:     #B3A89A;
    --c-linie:       #4A443A;
    --c-primaer:      #E08A6C;
    --c-primaer-tief: #D17456;
    --c-erfolg:      #7FBF8F;
    --c-fehler:      #E08279;
    --c-nacht:       #16140F;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-grundierung: #211F1B;
  --c-klarlack:    #2B2823;
  --c-anthrazit:   #F0EBE1;
  --c-graphit:     #B3A89A;
  --c-linie:       #4A443A;
  --c-primaer:      #E08A6C;
  --c-primaer-tief: #D17456;
  --c-erfolg:      #7FBF8F;
  --c-fehler:      #E08279;
  --c-nacht:       #16140F;
}