/* ============================================================
   tokens.css — Die EINE Quelle für Farben, Schriften, Abstände.
   Abgeleitet aus dem freigegebenen Design (design/DESIGN-SPRACHE.md
   und der theme()-Funktion in design/Tierheim-App.dc.html).

   Regel: Komponenten in app.css verwenden NUR diese Variablen,
   niemals feste Hex-/Pixelwerte. So bleibt alles konsistent.
   ============================================================ */

:root {
  /* ---------- Schriften ---------- */
  --ff-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ff-body: 'Hanken Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;

  /* ---------- Schriftgrößen ---------- */
  --fz-meta: 11.5px;
  --fz-xs: 12px;
  --fz-sm: 13px;
  --fz-label: 13.5px;
  --fz-base: 14px;
  --fz-md: 15px;
  --fz-lg: 16px;
  --fz-title: 20px;     /* Formular-Titel */
  --fz-name: 20px;      /* Hundename in Liste */
  --fz-h: 25px;         /* Seiten-Überschrift */
  --fz-hero: 26px;      /* Detail-/Login-Titel */

  /* ---------- Abstände ---------- */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 10px;
  --sp-5: 12px;
  --sp-6: 14px;
  --sp-7: 16px;
  --sp-8: 18px;
  --sp-9: 20px;
  --sp-10: 24px;
  --sp-11: 26px;

  /* ---------- Rundungen ---------- */
  --r-sm: 9px;
  --r-input: 12px;
  --r-md: 13px;
  --r-lg: 14px;
  --r-xl: 16px;
  --r-card: 18px;
  --r-sheet: 24px;
  --r-pill: 999px;
  --r-device: 42px;

  /* ---------- Linienstärken / Touch ---------- */
  --bd: 1.6px;          /* Standard-Rahmen */
  --stripe-w: 6px;      /* Status-Streifen links an Karten */
  --touch: 42px;        /* Mindest-Touch-Ziel */

  /* ============================================================
     FARBEN — Hellmodus (Standard)
     ============================================================ */
  --c-backdrop: #d8ccb2;     /* Hintergrund hinter dem Geräterahmen */
  --c-bezel: #21342b;        /* Geräterahmen */
  --c-page: #f4ecdc;         /* Seitenhintergrund */
  --c-surface: #fbf6ea;      /* Karten / Oberflächen */
  --c-footer: #eee3cd;       /* Karten-Fußzeilen, sekundäre Flächen */
  --c-hero: #ece1cc;         /* Hero / Sektionsflächen */

  --c-ink: #21342b;          /* Haupttext (tiefes Waldgrün) */
  --c-body: #3a4a40;         /* Fließtext */
  --c-muted: #7a6f5c;        /* sekundärer Text */
  --c-faint: #9a8d74;        /* Meta / Zeitstempel */
  --c-line: #ddd0b6;         /* Rahmen / Trenner */
  --c-line-soft: #ece1cb;    /* weiche Trennlinie */

  --c-primary: #2f6149;      /* Primäraktion */
  --c-primary-text: #244c3a; /* Primärtext auf hellen Flächen */
  --c-on-primary: #f4ecdc;   /* Text/Icon auf Primärfläche */
  --c-accent: #c45a34;       /* Akzent / FAB */
  --c-accent-shadow: rgba(196, 90, 52, .4);

  --c-tag-bg: #e9dec5;
  --c-tag-fg: #6b6253;

  /* Status: ok = vermittelbar, warn = Pflege nötig, care = in Behandlung */
  --c-ok-stripe: #2f6149;  --c-ok-bg: #dcebd9;  --c-ok-text: #2f6149;
  --c-warn-stripe: #e0a32e; --c-warn-bg: #f6e6c9; --c-warn-text: #9a6a1c;
  --c-care-stripe: #c45a34; --c-care-bg: #f0d9cf; --c-care-text: #a6471f;

  /* Kategorie-Punkte */
  --c-blue: #3d7ea8; --c-blue-bg: #dde9f0; --c-blue-text: #2c5f7e;
  --c-grey-bg: #e9e1d0; --c-grey-text: #6b6253;
  --c-star: #e0a32e;

  /* Chips ausgewählt */
  --c-chipsel-bg: #21342b;
  --c-chipsel-text: #f4ecdc;

  /* Info-Box (Wichtige Hinweise) */
  --c-info-bg: #f6edd6;
  --c-info-border: #e3d4b0;
  --c-info-head: #a6471f;
  --c-info-text: #54483a;
  --c-info-btn-bg: #ece0c6;

  --c-dash: #c7b896;         /* gestrichelter Rahmen (Foto-Upload) */
  --c-toast-bg: #21342b;
  --c-toast-fg: #f4ecdc;

  /* Schatten */
  --shadow-card: 0 4px 14px rgba(33, 52, 43, .07);
  --shadow-fab: 0 10px 24px var(--c-accent-shadow);
  --shadow-btn: 0 8px 18px var(--c-accent-shadow);
  --shadow-device: 0 24px 60px rgba(0, 0, 0, .28);
  --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, .25);
  --shadow-toast: 0 10px 30px rgba(0, 0, 0, .35);
}

/* ============================================================
   FARBEN — Dunkelmodus
   Gleiche Token-Rollen, warme dunkle Basis. Nur Farben ändern
   sich, Abstände/Schriften/Rundungen bleiben gleich.
   ============================================================ */
[data-theme="dark"] {
  --c-backdrop: #0d1310;
  --c-bezel: #000000;
  --c-page: #16201b;
  --c-surface: #1e2a23;
  --c-footer: #243029;
  --c-hero: #1b251f;

  --c-ink: #eef0e4;
  --c-body: #cdd4c4;
  --c-muted: #9aa493;
  --c-faint: #7d8775;
  --c-line: #2e3a30;
  --c-line-soft: #28332b;

  --c-primary: #5fa884;
  --c-primary-text: #86ceaa;
  --c-on-primary: #16201b;
  --c-accent: #d97a4f;
  --c-accent-shadow: rgba(0, 0, 0, .45);

  --c-tag-bg: #28332b;
  --c-tag-fg: #9aa493;

  --c-ok-stripe: #5fa884;  --c-ok-bg: #1d3528;  --c-ok-text: #8fd6ad;
  --c-warn-stripe: #e0a32e; --c-warn-bg: #36301a; --c-warn-text: #ecc36e;
  --c-care-stripe: #d97a4f; --c-care-bg: #372018; --c-care-text: #eda07a;

  --c-blue: #5a9cc4; --c-blue-bg: #1a2a34; --c-blue-text: #8fc2de;
  --c-grey-bg: #28332b; --c-grey-text: #9aa493;
  --c-star: #e0a32e;

  --c-chipsel-bg: #eef0e4;
  --c-chipsel-text: #16201b;

  --c-info-bg: #26221a;
  --c-info-border: #36301f;
  --c-info-head: #eda07a;
  --c-info-text: #cdd4c4;
  --c-info-btn-bg: #352f20;

  --c-dash: #46503e;
  --c-toast-bg: #eef0e4;
  --c-toast-fg: #16201b;

  --shadow-card: 0 4px 14px rgba(0, 0, 0, .3);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}