/* ============================================================
   tokens.css — Design-Tokens
   Palette: Palästina (Flaggenfarben)
     Grün  #007A3D · Rot #CE1126 · Schwarz #000000 · Weiß #FFFFFF
   Alle Werte zentral; Komponenten nutzen ausschließlich die Variablen.
   ============================================================ */
:root {
  /* Flaggenfarben */
  --pal-green:       #007a3d;
  --pal-green-deep:  #00582c;
  --pal-green-tint:  #e7f2eb;
  --pal-red:         #ce1126;
  --pal-red-deep:    #a30d1e;
  --pal-red-tint:    #fbecee;
  --pal-black:       #101210;
  --pal-white:       #ffffff;

  /* Semantische Zuordnung */
  --bg:              #f7f7f4;
  --card:            var(--pal-white);
  --ink:             var(--pal-black);
  --ink-soft:        #5b645d;
  --line:            #e3e6e0;
  --accent:          var(--pal-green);
  --accent-deep:     var(--pal-green-deep);
  --accent-tint:     var(--pal-green-tint);
  --secondary:       var(--pal-red);
  --secondary-deep:  var(--pal-red-deep);
  --secondary-tint:  var(--pal-red-tint);
  --flag-black:      var(--pal-black);
  --flag-white:      var(--pal-white);

  /* Chip-Varianten ohne eigenen Akzent (Rubriken Deutschland/Gesellschaft) */
  --chip-neutral-bg: #eef0ee;
  --chip-neutral-ink:#4a524a;
  --chip-warm-bg:    #f2efe4;
  --chip-warm-ink:   #6b5d2e;

  color-scheme: light;

  /* Typografie */
  --font-sans:   "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:  "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-arabic: "Noto Naskh Arabic", "Amiri", serif;

  /* Maße */
  --radius:       14px;
  --radius-sm:    9px;
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;
  --space-4: 16px; --space-5: 24px;  --space-6: 32px;
  --space-7: 48px; --space-8: 64px;
  --max-width: 1180px;
  --header-h: 64px;

  /* Effekte */
  --shadow-hover: 0 10px 28px rgba(16, 18, 16, 0.09);
  --shadow-card:  0 1px 2px rgba(16, 18, 16, 0.04);
  --transition: 160ms ease;
}

/* ============================================================
   Dunkles Design — Umschaltbar über [data-theme="dark"] am
   <html>-Element (Steuerung: assets/js/main.js, Merken im
   localStorage, Voreinstellung folgt dem Betriebssystem).
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:             #141713;
  --card:           #1c1f1b;
  --ink:            #e9e8e2;
  --ink-soft:       #a9b0a7;
  --line:           #2d322b;

  /* Akzente für dunkle Flächen aufgehellt, Tints abgedunkelt */
  --accent:         #33b168;
  --accent-deep:    #8ed6ab;
  --accent-tint:    #1d3025;
  --secondary:      #e5566a;
  --secondary-deep: #f394a2;
  --secondary-tint: #371f24;

  --chip-neutral-bg: #262a24;
  --chip-neutral-ink:#c3c9c1;
  --chip-warm-bg:    #322c1e;
  --chip-warm-ink:   #d3bd82;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.6);
}

/* Bilder im Dunkelmodus leicht dämpfen */
[data-theme="dark"] img { filter: brightness(0.88) contrast(1.02); }