/* =====================================================================
   Q4 Rathaus — Design-Tokens
   Neutral (Tinte / Papier / Grau) + EINE Akzentfarbe je Gemeinde.
   Reihenfolge der Einbindung: fonts.css → tokens.css → components.css
   ===================================================================== */

:root {
  /* ---------- Mandant: die einzige Farbe, die eine Gemeinde setzt ----------
     Das Layout setzt --accent und --on-accent je Gemeinde auf :root
     (siehe README, „Mandantenfarbe“). Alle Ableitungen folgen unten. */
  --accent: #2340e0;            /* Musterstadt-Blau (Vorgabe) */
  --on-accent: #ffffff;         /* Textfarbe AUF der Akzentfläche — PHP wählt Weiß oder Tinte */

  /* ---------- Neutral ---------- */
  --ink: #0c0d0f;
  --ink-2: #15171a;
  --ink-3: #1f2226;
  --paper: #f3f1ec;
  --paper-2: #e9e6df;
  --surface: #fbfaf8;           /* Karten auf Papier */
  --text: #121316;
  --muted: #595c62;             /* 5,9:1 auf Papier */
  --line: rgba(18, 19, 22, .12);
  --line-strong: rgba(18, 19, 22, .26);
  --on-ink: #eceae5;
  --on-ink-muted: #a2a5ab;      /* 7,9:1 auf Tinte */
  --line-ink: rgba(255, 255, 255, .1);
  --scrim: rgba(12, 13, 15, .55);

  /* ---------- Status (Vorgänge, Hinweise, Meldungen), je ≥ 4,5:1 auf Papier ---------- */
  --ok: #13703a;
  --warn: #965400;
  --err: #c2261b;

  /* Abfall-Fraktionen (deutsche Tonnenfarben; immer mit Text, nie nur Farbe) */
  --bin-rest: #3d4046;
  --bin-bio: #7a4b22;
  --bin-papier: #1f5fc4;
  --bin-gelb: #e8c400;
  --bin-glas: #2f8a57;

  /* Pastell-Flächen (Kacheln, Platzhalter, Tags) — Schrift darauf immer --text */
  --pastel-mint: #dcf3e3;
  --pastel-sky: #ddedf8;
  --pastel-sun: #fbf1c9;
  --pastel-peach: #fce4d6;
  --pastel-sage: #e7eedc;

  /* Mischanteile der Ableitungen (Dunkelmodus/Flächen ändern nur diese) */
  --mix-text: 86%; --mix-text-to: #000;   /* Akzent als Schrift */
  --mix-soft: 11%;                        /* Akzent als Fläche */
  --mix-status: 12%;

  /* ---------- Schrift ---------- */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
  --font-serif: "Instrument Serif", Georgia, serif;

  /* Skala: mobil zuerst, fließend bis Desktop (clamp) */
  --fs-2xs: 11.5px;   /* nur Mono-Labels in Versalien */
  --fs-xs: 12.5px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: clamp(17px, 1.2vw, 19px);
  --fs-lg: clamp(20px, 1.8vw, 24px);
  --fs-xl: clamp(26px, 3vw, 36px);
  --fs-2xl: clamp(34px, 4.8vw, 64px);
  --fs-3xl: clamp(44px, 7.4vw, 112px);
  --fs-display: clamp(56px, 12vw, 184px);

  --lh-tight: .94;
  --lh-head: 1.04;
  --lh-snug: 1.25;
  --lh-body: 1.6;
  --tr-display: -.05em;
  --tr-head: -.035em;
  --tr-body: -.005em;
  --tr-mono: .04em;

  /* ---------- Raster & Abstände (4-px-Basis) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 176px;
  --wrap: 1320px;               /* Inhaltsbreite */
  --wrap-text: 68ch;            /* Lesebreite Fließtext */
  --gut: clamp(16px, 4vw, 40px);/* Seitenrand: 16 px mobil */
  --sec: clamp(72px, 10vw, 152px); /* Abstand zwischen Sektionen */
  --grid-gap: clamp(12px, 1.6vw, 20px);
  --tap: 44px;                  /* Mindestgröße Touch-Ziel */
  --head-h: 68px;

  /* ---------- Radien ---------- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 36px; --r-pill: 999px;

  /* ---------- Schatten (weich, lang, neutral — keine farbigen Glows) ---------- */
  --sh-1: 0 1px 2px rgba(12, 13, 15, .06), 0 1px 1px rgba(12, 13, 15, .04);
  --sh-2: 0 10px 30px -12px rgba(12, 13, 15, .18), 0 2px 6px -2px rgba(12, 13, 15, .06);
  --sh-3: 0 40px 90px -30px rgba(12, 13, 15, .35), 0 8px 20px -8px rgba(12, 13, 15, .1);
  --sh-pop: 0 24px 60px -18px rgba(12, 13, 15, .4);

  /* ---------- Bewegung ---------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);       /* Standard: schnell rein, weich aus */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);   /* Flächen, Seitenwechsel */
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);/* kleine Bestätigungen, nie für Text */
  --dur-1: 120ms;  /* Hover, Farbwechsel */
  --dur-2: 220ms;  /* Buttons, Toggles */
  --dur-3: 420ms;  /* Karten, Panels */
  --dur-4: 720ms;  /* Einblenden beim Scrollen */
  --dur-5: 1200ms; /* große Hero-Bewegungen */
  --stagger: 70ms; /* Versatz je Element in Listen */
  --reveal-y: 24px;

  /* ---------- Ebenen ---------- */
  --z-head: 50; --z-drawer: 80; --z-toast: 90;

  color-scheme: light;
}

/* ---------- Ableitungen ----------
   Werden auf jedem Element neu berechnet, das Mandant, Thema oder Fläche
   umschaltet — so stimmen sie auch in verschachtelten Bereichen. */
:root, [data-tenant], [data-theme], [data-surface], [data-farbwelt] {
  --accent-text: color-mix(in oklab, var(--accent) var(--mix-text), var(--mix-text-to)); /* Akzent als Schrift/Link */
  --accent-soft: color-mix(in oklab, var(--accent) var(--mix-soft), var(--paper));
  --accent-line: color-mix(in oklab, var(--accent) 34%, transparent);
  --accent-glow: color-mix(in oklab, var(--accent) 45%, transparent);
  --ok-soft: color-mix(in oklab, var(--ok) var(--mix-status), var(--paper));
  --warn-soft: color-mix(in oklab, var(--warn) var(--mix-status), var(--paper));
  --err-soft: color-mix(in oklab, var(--err) var(--mix-status), var(--paper));
  --focus: var(--text);         /* Fokusring: immer maximaler Kontrast zur Fläche */
}

/* ---------- Dunkelmodus: System-Einstellung, außer explizit hell ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d0e10; --paper-2: #16181b; --surface: #1a1c20;
    --text: #eceae5; --muted: #a2a5ab;
    --line: rgba(255, 255, 255, .1); --line-strong: rgba(255, 255, 255, .24);
    --ok: #5cc58a; --warn: #e7a849; --err: #f2867c;
    --mix-text: 58%; --mix-text-to: #fff; --mix-soft: 20%; --mix-status: 16%;
    --sh-2: 0 10px 30px -12px rgba(0, 0, 0, .6); --sh-3: 0 40px 90px -30px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}
[data-theme="dark"] {
  --paper: #0d0e10; --paper-2: #16181b; --surface: #1a1c20;
  --text: #eceae5; --muted: #a2a5ab;
  --line: rgba(255, 255, 255, .1); --line-strong: rgba(255, 255, 255, .24);
  --ok: #5cc58a; --warn: #e7a849; --err: #f2867c;
  --mix-text: 58%; --mix-text-to: #fff; --mix-soft: 20%; --mix-status: 16%;
  --sh-2: 0 10px 30px -12px rgba(0, 0, 0, .6); --sh-3: 0 40px 90px -30px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* Ein Bereich bleibt hell, auch im Dunkelmodus (z. B. Suchfeld auf Video) */
[data-theme="light"] {
  --paper: #f3f1ec; --paper-2: #e9e6df; --surface: #fbfaf8;
  --text: #121316; --muted: #595c62;
  --line: rgba(18, 19, 22, .12); --line-strong: rgba(18, 19, 22, .26);
  --ok: #13703a; --warn: #965400; --err: #c2261b;
  --mix-text: 86%; --mix-text-to: #000; --mix-soft: 11%; --mix-status: 12%;
  color-scheme: light;
}

/* ---------- Farbwelt „frisch“: Pastell, Grün, weich statt Schwarz ----------
   Für Gemeinden, die sich grün und freundlich zeigen wollen (Vorgabe Musterstadt).
   <html data-farbwelt="frisch"> + eine helle, frische Akzentfarbe (z. B. #7ED69B).
   Tinte wird Tannengrün, Papier wird Minz-Creme, Akzent als Schrift dunkel abgemischt. */
[data-farbwelt="frisch"], [data-farbwelt="frisch"] [data-theme="light"] {
  --ink: #173a2b; --ink-2: #1e4535; --ink-3: #27503f;
  --on-ink: #eef4ef; --on-ink-muted: #b4c8bc; --line-ink: rgba(255, 255, 255, .14);
  --paper: #f4f7f0; --paper-2: #e6eedf; --surface: #fcfdf9;
  --text: #15261d; --muted: #4e5f55;             /* 14:1 bzw. 6,4:1 auf Papier */
  --line: rgba(21, 38, 29, .12); --line-strong: rgba(21, 38, 29, .26);
  --ok: #1b6b3f; --warn: #8f5200; --err: #b8321f;
  --mix-text: 42%; --mix-text-to: #0b2418; --mix-soft: 30%; --mix-status: 14%;
  --sh-2: 0 12px 32px -14px rgba(23, 58, 43, .2), 0 2px 6px -2px rgba(23, 58, 43, .06);
  --sh-3: 0 40px 90px -32px rgba(23, 58, 43, .3), 0 8px 20px -8px rgba(23, 58, 43, .08);
  --sh-pop: 0 24px 60px -18px rgba(23, 58, 43, .32);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-farbwelt="frisch"]:not([data-theme="light"]), [data-farbwelt="frisch"]:not([data-theme="light"]):not(:root) {
    --paper: #0f1a15; --paper-2: #16241d; --surface: #1b2b23;
    --text: #e8f0ea; --muted: #a3b5aa;
    --line: rgba(255, 255, 255, .1); --line-strong: rgba(255, 255, 255, .24);
    --ok: #6fd39a; --warn: #e9b05a; --err: #f2917f;
    --pastel-mint: #1f3a2c; --pastel-sky: #1d3240; --pastel-sun: #3a3420; --pastel-peach: #3e2a22; --pastel-sage: #26301f;
    --mix-text: 70%; --mix-text-to: #fff; --mix-soft: 22%; --mix-status: 16%;
    color-scheme: dark;
  }
}
[data-farbwelt="frisch"][data-theme="dark"], [data-farbwelt="frisch"] [data-theme="dark"] {
  --paper: #0f1a15; --paper-2: #16241d; --surface: #1b2b23;
  --text: #e8f0ea; --muted: #a3b5aa;
  --line: rgba(255, 255, 255, .1); --line-strong: rgba(255, 255, 255, .24);
  --ok: #6fd39a; --warn: #e9b05a; --err: #f2917f;
  --pastel-mint: #1f3a2c; --pastel-sky: #1d3240; --pastel-sun: #3a3420; --pastel-peach: #3e2a22; --pastel-sage: #26301f;
  --mix-text: 70%; --mix-text-to: #fff; --mix-soft: 22%; --mix-status: 16%;
  color-scheme: dark;
}

/* ---------- Flächen-Umschalter: Komponenten darin erben die richtigen Farben ----------
   <section data-surface="ink">    Tinte (Schwarz)
   <section data-surface="accent"> Akzentfläche der Gemeinde                  */
[data-surface="ink"] {
  --paper: var(--ink); --paper-2: var(--ink-2); --surface: var(--ink-3);
  --text: var(--on-ink); --muted: var(--on-ink-muted);
  --line: var(--line-ink); --line-strong: rgba(255, 255, 255, .26);
  --ok: #5cc58a; --warn: #e7a849; --err: #f2867c;
  --mix-text: 58%; --mix-text-to: #fff; --mix-soft: 22%; --mix-status: 16%;
  color-scheme: dark;
  background: var(--paper); color: var(--text);
}
[data-surface="accent"] {
  --paper: var(--accent); --paper-2: color-mix(in oklab, var(--accent) 86%, var(--on-accent));
  --surface: color-mix(in oklab, var(--accent) 90%, var(--on-accent));
  --text: var(--on-accent); --muted: color-mix(in oklab, var(--on-accent) 82%, var(--accent));
  --line: color-mix(in oklab, var(--on-accent) 22%, transparent);
  --line-strong: color-mix(in oklab, var(--on-accent) 45%, transparent);
  --accent-text: var(--on-accent);
  background: var(--paper); color: var(--text);
}

/* ---------- Backoffice: dichter, ruhiger — gleiche Tokens ---------- */
[data-density="compact"] {
  --fs-base: 14.5px; --fs-md: 15.5px; --fs-lg: 18px; --fs-xl: 24px; --fs-2xl: 30px;
  --sec: 32px; --gut: 24px; --grid-gap: 12px; --head-h: 56px;
  --reveal-y: 0px;
}