/* =====================================================================
   Elektro Pepel · Version B „Hell & großzügig“ · Design-Tokens
   Reihenfolge im Layout-<head>:
   bootstrap.css → ep-schrift.css → ep-tokens.css → ep-komponenten.css → ep-motion.css
   Schrift: Instrument Sans, selbst gehostet über ep-schrift.css (fonts/-Ordner mitkopieren).
   Kein Google-Fonts-Link nötig (Datenschutz).
   ===================================================================== */
:root {
  /* Flächen */
  --ep-grund: #FAFAF7;          /* Seitenhintergrund */
  --ep-karte: #FFFFFF;          /* Karten, Kopfleiste-Elemente, Felder */
  --ep-leise: #F4F3EF;          /* Nebenknöpfe, Icon-Kreise, Felder auf Karten */
  --ep-leise-2: #FAFAF7;        /* Kacheln in Karten */
  --ep-linie: #F1F0EC;          /* Trennlinien in Karten */
  --ep-rand: #ECEBE6;           /* Feldränder, Chips */
  --ep-rand-stark: #D6D5CF;     /* gestrichelte Rahmen, leere Punkte */

  /* Text */
  --ep-text: #141414;
  --ep-text-2: #3D3D39;         /* Labels */
  --ep-text-leise: #6B6B66;     /* Nebentext (min. 4.5:1 auf Weiß) */

  /* Akzent – NUR klein: Punkte, aktiver Menüpunkt, Icon-Kreis der Hauptkachel, „heute“ */
  --ep-gelb: #FFDD00;
  --ep-gelb-hell: #FFF9D6;      /* Hinweisflächen */
  --ep-gelb-zart: #FFFBEA;      /* „heute“-Spalte */

  /* Haupt-Aktionen sind SCHWARZ (Pillen), nicht gelb */
  --ep-dunkel: #141414;

  /* Status */
  --ep-rot: #B42318;   --ep-rot-hell: #FDECEA;  --ep-rot-text: #8F1D14;  --ep-rot-ring: #FBEAE8;
  --ep-gruen: #1F7A4D; --ep-gruen-hell: #E7F4EC; --ep-gruen-text: #15583A;
  --ep-amber: #E0A800; --ep-amber-ring: #FCF3D9;

  /* Schrift */
  --ep-font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ep-h1: 52px;      --ep-h1-lh: 56px;   --ep-h1-ls: -0.035em;   /* Seitentitel Web */
  --ep-h2: 22px;      /* Kartentitel */
  --ep-text-m: 16px;  /* Fließtext, min. 15 px; Tablet min. 16 px */

  /* Ecken */
  --ep-r-karte: 24px;     /* große Karten */
  --ep-r-kachel: 22px;    /* Kacheln, Schnellaktionen */
  --ep-r-klein: 16px;     /* Felder, Tageskästchen */
  --ep-r-icon: 12px;      /* kleine Icon-Kästchen */
  --ep-r-pille: 999px;    /* Knöpfe, Chips, Zähler */

  /* Schatten (keine Rahmen um Karten) */
  --ep-schatten: 0 1px 2px rgba(20,20,20,.04), 0 10px 30px -14px rgba(20,20,20,.16);
  --ep-schatten-hover: 0 2px 4px rgba(20,20,20,.05), 0 24px 48px -20px rgba(20,20,20,.28);
  --ep-schatten-dunkel: 0 1px 2px rgba(20,20,20,.1), 0 16px 34px -16px rgba(20,20,20,.45);
  --ep-schatten-pop: 0 2px 6px rgba(20,20,20,.06), 0 30px 60px -20px rgba(20,20,20,.35);

  /* Bewegung */
  --eo: cubic-bezier(.16,1,.3,1);      /* Standard: schnell raus, weich rein */
  --eio: cubic-bezier(.65,0,.35,1);

  /* Maße */
  --ep-kopf-h: 76px;
  --ep-rail-w: 84px;          /* Icon-Leiste Web */
  --ep-sub-w: 248px;          /* Unterpunkte Web */
  --ep-touch: 48px;           /* Mindest-Tippfläche Tablet/Handy */
}