/* =========================================================================
   KLAMBT Design CI — Design Tokens
   Single source of truth. Niemals Ad-hoc-Werte in Komponenten verwenden.
   Abgeleitet aus dem KLAMBT Styleguide (Farbwelt Masterbrand/Subbrands)
   und den bestehenden Anwendungen (Paket Service, Magazine Portal).
   ========================================================================= */

:root {
  /* ---------- Marke: Masterbrand / Subbrands ---------- */
  --k-navy:            #063349;  /* Masterbrand — H1, Primaer-Buttons, Panel-Header */
  --k-navy-hover:      #04263a;
  --k-navy-active:     #021c2c;
  --k-blue:            #0880AA;  /* Subbrand — Eyebrow, Links, aktive Tabs/Chips */
  --k-blue-hover:      #066b8f;
  --k-blue-active:     #055875;
  --k-blue-300:        #83BFD8;
  --k-blue-050:        #EAF4F9;
  --k-teal-300:        #84CCD6;
  --k-teal-200:        #9DD3D6;
  --k-gray-blue:       #C3D0D1;
  --k-dk-red:          #E20613;  /* Delius-Klasing-Signet, ADMIN-Badge */
  --k-dk-red-hover:    #c00510;

  /* ---------- Neutrals / Flaechen ---------- */
  --k-white:           #FFFFFF;
  --k-surface:         #FFFFFF;
  --k-surface-muted:   #F4F6F8;  /* Hinweis-Boxen, inaktive Tabs, Row-Hover */
  --k-surface-sunken:  #EDF1F5;
  --k-footer-bg:       #F2F2F7;  /* Footer, eigener Token statt --k-surface-muted (gemessen paketservice.dev.klambt.de 24.08.2026, weicht leicht ab) */
  --k-border:          #E2E8F0;
  --k-border-strong:   #CBD5E1;
  --k-text:            #063349;
  --k-text-strong:     #063349; /* Überschriften, Zellen, Labels — hell = Navy, dunkel = fast Weiß */  /* Text-Dunkel = Navy */
  --k-text-muted:      #64748B;
  --k-text-subtle:     #94A3B8;
  --k-text-brand:      #9AA4AB; /* App-Name im Header, wie echte App (Paket Service) */
  --k-text-invert:     #FFFFFF;
  --k-disabled-bg:     #E6EBF0;
  --k-disabled-text:   #9AA8B6;
  --k-disabled-border: #E2E8F0;

  /* ---------- Status ---------- */
  --k-success:         #1B7F4B;
  --k-success-bg:      #EAF6EF;
  --k-warning:         #B45309;
  --k-warning-bg:      #FDF4E7;
  --k-danger:          #C2101C;
  --k-danger-bg:       #FDECEC;
  --k-info:            #0880AA;
  --k-info-bg:         #EAF4F9;

  /* ---------- Status-Tints (Zustands-Badges, gemessen 24.08.2026) ------
     Kräftige Textfarbe + gleiche Farbe als ~13-14%-Alpha-Hintergrund.
     Referenz: paketservice.dev.klambt.de/suche ("Abgeholt", "Nicht
     zugeordnet"). Bewusst eigene Tokens statt --k-success/--k-warning:
     die gemessenen Farben weichen von den bestehenden Status-Tokens ab.
     --k-danger-tint ist NICHT gemessen (kein Referenzpaar im Audit) —
     rechnerisch aus --k-danger abgeleitet (13% Alpha), Textfarbe bleibt
     --k-danger (bereits kräftig genug).

     Owner-Fix Runde 2 (24.08.2026, §9-Nachrechnung, WCAG-Formel gegen den
     effektiven Tint-Hintergrund = Tint-Farbe als Alpha über #FFFFFF):
     --k-success-tint-text war #248A3D auf effektivem Hintergrund #E5F8E9
     (≈3.95:1, verfehlt 4.5:1) → abgedunkelt auf #1E7A34 (≈4.86:1).
     --k-warning-tint-text war #B96F00 auf effektivem Hintergrund #FFF0DB
     (≈3.52:1, verfehlt 4.5:1) → abgedunkelt auf #9C5D00 (≈4.72:1).
     --k-danger-tint-text (#C2101C) auf effektivem Hintergrund #F7E0E1
     erreicht bereits ≈4.94:1 — unveraendert. */
  --k-success-tint:      rgba(52, 199, 89, 0.13);
  --k-success-tint-text: #1E7A34; /* abgedunkelt von #248A3D, ≈4.86:1 auf #E5F8E9 (Owner-Fix Runde 2) */
  --k-warning-tint:      rgba(255, 149, 0, 0.14);
  --k-warning-tint-text: #9C5D00; /* abgedunkelt von #B96F00, ≈4.72:1 auf #FFF0DB (Owner-Fix Runde 2) */
  --k-danger-tint:       rgba(194, 16, 28, 0.13); /* abgeleitet, nicht gemessen */
  --k-danger-tint-text:  #C2101C; /* = --k-danger; ≈4.94:1 auf #F7E0E1, erfuellt §9 bereits (Owner-Fix Runde 2 geprueft) */

  /* ---------- Typografie ---------- */
  /* Frutiger LT Std ausschliesslich im Logo-Asset — nie als Web-Font. */
  --k-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --k-fs-10: 10px;  /* neu: Rollen-Badge (gemessen 24.08.2026) */
  --k-fs-11: 11px;
  --k-fs-12: 12px;
  --k-fs-13: 13px;
  --k-fs-14: 14px;
  --k-fs-15: 15px;
  --k-fs-16: 16px;
  --k-fs-18: 18px;
  --k-fs-20: 20px;
  --k-fs-24: 24px;
  --k-fs-30: 30px;  /* neu: H1 Innenseiten, angeglichen an Paket Service (gemessen 24.08.2026) */
  --k-fs-32: 32px;
  --k-fs-34: 34px;  /* neu: H1 Login, angeglichen an Paket Service (gemessen 24.08.2026) */
  --k-fs-40: 40px;
  --k-fs-56: 56px;

  --k-fw-regular:  400;
  --k-fw-semibold: 600;
  --k-fw-bold:     700;
  --k-fw-extrabold: 800;

  --k-lh-tight:  1.15;
  --k-lh-snug:   1.3;
  --k-lh-normal: 1.5;
  --k-lh-relaxed: 1.65;

  --k-ls-eyebrow: 0.14em; /* Metrik-Angleichung 24.08.2026: vorher 0.08em, jetzt wie Paket Service */
  --k-ls-caps:    0.06em;
  --k-ls-tight:   -0.01em;
  --k-ls-table:   0.03em; /* Tabellenkopf, angeglichen an Paket Service (gemessen 24.08.2026) */

  --k-fs-brand: 9.5px;   /* App-Name im Header, wie echte App (Paket Service) */
  --k-ls-brand: 0.18em;  /* = 1.71px bei 9.5px */

  /* ---------- Spacing (4px-Raster) ---------- */
  --k-space-1:  4px;
  --k-space-2:  8px;
  --k-space-3:  12px;
  --k-space-4:  16px;
  --k-space-5:  20px;
  --k-space-6:  24px;
  --k-space-7:  32px;
  --k-space-8:  40px;
  --k-space-9:  48px;
  --k-space-10: 64px;

  /* ---------- Tabellen-Padding (gemessene Werte, kein 4px-Vielfaches) ---------- */
  --k-th-pad-y:    6px;   /* Tabellenkopf vertikal, wie Paket Service (gemessen 24.08.2026) */
  --k-table-pad-x: 10px;  /* th/td horizontal, wie Paket Service (gemessen 24.08.2026) */

  /* ---------- Chip-/Badge-Feinmasse (gemessene Werte, kein 4px-Vielfaches,
     Paket Service /suche, gemessen 24.08.2026) ---------- */
  --k-chip-h:          29px;  /* Filter-Chip Höhe */
  --k-chip-pad-y:      6px;   /* Filter-Chip Padding vertikal */
  --k-chip-pad-x:      14px;  /* Filter-Chip Padding horizontal */
  --k-badge-h:         18px;  /* Rollen-Badge Höhe (.k-badge) */
  --k-badge-pad-y:     3px;   /* Rollen-Badge Padding vertikal (horizontal: --k-space-2) */
  --k-badge-tint-h:        23px; /* Status-Badge (Tint-Muster) Höhe, Messwert 22–23px */
  --k-badge-tint-pad-y:    4px;  /* Status-Badge Padding vertikal */
  --k-badge-tint-pad-x:    10px; /* Status-Badge Padding horizontal */
  --k-search-lg-h:         46px; /* .k-search--lg Höhe, gemessen PS /suche 24.08.2026, kein 4px-Raster-Wert; Touch siehe @media (pointer: coarse) unten (Fix-Runde 1) */

  /* ---------- Radien ---------- */
  --k-radius-xs:   4px;   /* Login-Tabs (wie magazine.klambt.services) */
  --k-radius-sm:   8px;
  --k-radius-md:   10px;  /* Buttons, Inputs */
  --k-radius-lg:   12px;  /* grosse Inputs, Suchfeld */
  --k-radius-xl:   16px;  /* Cards, Panels */
  --k-radius-pill: 999px; /* Chips, Badges */

  /* ---------- Elevation (flach & ruhig) ---------- */
  --k-shadow-none:     none;
  --k-shadow-sm:       0 1px 2px rgba(6, 51, 73, 0.04);
  --k-shadow-card:     0 1px 3px rgba(0, 0, 0, 0.05); /* neu 24.08.2026: Cards wie Paket Service, ersetzt Schattenlosigkeit */
  --k-shadow-dropdown: 0 10px 30px rgba(6, 51, 73, 0.12), 0 2px 8px rgba(6, 51, 73, 0.06); /* angeglichen an magazine.stage.klambt.services/teilen (gemessen 24.08.2026) */
  --k-shadow-modal:    0 20px 50px rgba(6, 51, 73, 0.25);
  --k-overlay:         rgba(6, 51, 73, 0.45);

  /* ---------- Borders / Fokus ---------- */
  --k-border-width: 1px;
  --k-focus-ring:   0 0 0 3px rgba(8, 128, 170, 0.35);
  --k-focus-color:  var(--k-blue);

  /* ---------- Layout ---------- */
  --k-container-max: 1440px;
  --k-gutter:        24px;   /* Mobile / Tablet */
  --k-gutter-lg:     32px;   /* Desktop */
  --k-header-h:      64px;   /* wie Paket Service (gemessen 21.08.2026) */
  --k-control-h:     37px;   /* Desktop kompakt wie Paket Service (gemessen 24.08.2026); Touch siehe @media (pointer: coarse) unten */
  --k-control-h-lg:  40px;   /* Inputs, Desktop kompakt wie Paket Service (gemessen 24.08.2026); Touch siehe @media (pointer: coarse) unten */
  --k-control-h-xl:  44px;   /* grosse Buttons/Suche (.k-btn--lg/--sso, .k-search--lg), eigener Token statt Wiederverwendung von --k-control-h-lg (Fix-Runde 1, Task 9 Concern 3+4); Touch siehe @media (pointer: coarse) unten */
  --k-btn-sm-h:      32px;   /* .k-btn--sm Höhe, gemessen magazine.stage 24.08.2026; Touch siehe @media (pointer: coarse) unten (Owner-Fix Runde 2) */
  --k-select-sm-h:   36px;   /* .k-select--sm Höhe, gemessen magazine.stage 24.08.2026; Touch siehe @media (pointer: coarse) unten (Owner-Fix Runde 2) */

  /* ---------- Breakpoints (dokumentarisch; @media braucht Literale) ---------- */
  --k-bp-tablet:  640px;
  --k-bp-desktop: 1024px;

  /* ---------- Motion ---------- */
  --k-duration: 140ms;
  --k-ease:     cubic-bezier(0.2, 0, 0.2, 1);
}

/* ===== TOUCH: Mindest-Trefferflaeche =========================
   Desktop (Maus/Trackpad) faehrt kompakt (37/40px, wie Paket Service);
   auf Touch-Geraeten (pointer: coarse) greift wieder die 44px-Regel aus
   DESIGN.md §8.5. Siehe CLAUDE.md Anti-Patterns / Architektur-Entscheidung
   Task 9. Funktionsgleicher Block auch in tokens.scss (dort als reines
   CSS, da Sass-Variablen keine Media-Query-Overrides koennen).
   --k-chip-h und --k-search-lg-h ergaenzt (Fix-Runde 1, Task-11-Review):
   beide wurden in Fix-Runde 2/Task 11 auf literale Audit-Messwerte
   umgestellt (29px/46px) und hatten dadurch keine Touch-Skalierung mehr —
   .k-chip ist ein <button> (DESIGN.md §8.5 bindet ALLE interaktiven
   Elemente); .k-search--lg ist ein Suchfeld, ebenfalls interaktiv.
   --k-btn-sm-h und --k-select-sm-h ergaenzt (Owner-Fix Runde 2, 24.08.2026):
   .k-btn--sm/.k-btn--icon.k-btn--sm (32px) und .k-select--sm (36px) waren
   literale Audit-Messwerte ohne Touch-Skalierung — derselbe Verstoss gegen
   §8.5 wie oben bei --k-chip-h/--k-search-lg-h, jetzt analog behoben. */
@media (pointer: coarse) {
  :root {
    --k-control-h: 44px; --k-control-h-lg: 48px; --k-control-h-xl: 48px;
    --k-chip-h: 44px; /* Touch-Mindestgroesse fuer den interaktiven Filter-Chip (<button>) */
    --k-search-lg-h: 48px; /* wie --k-control-h-xl-Touch-Wert, DESIGN.md §8.5 */
    --k-btn-sm-h: 44px; /* Touch-Mindestgroesse fuer .k-btn--sm/.k-btn--icon.k-btn--sm (Owner-Fix Runde 2) */
    --k-select-sm-h: 44px; /* Touch-Mindestgroesse fuer .k-select--sm (Owner-Fix Runde 2) */
  }
}

/* ===== THEME: dark ============================================
   Aktivierung: <html data-theme="dark">; ohne data-theme folgt der
   System-Modus prefers-color-scheme; <html data-theme="light"> erzwingt Hell.
   WICHTIG: Beide Blöcke (Media-Query und Attribut) wertgleich halten!
   verify-tokens.mjs prüft nur die Light-Basis oberhalb dieses Markers. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --k-footer-bg:       #14232E; /* wie --k-surface-muted dunkel: echte App hat keinen Dark Mode, keine eigene Messung */
  --k-success-tint:      rgba(76, 195, 138, 0.22); /* höhere Alpha als Hell (13%), sonst auf dunkler Fläche kaum sichtbar */
  --k-success-tint-text: #4CC38A; /* = --k-success dunkel; ≈5.20:1 auf effektivem Hintergrund #1C3F3A (Owner-Fix Runde 2 geprueft, ≥4.5 — unveraendert) */
  --k-warning-tint:      rgba(232, 169, 79, 0.22);
  --k-warning-tint-text: #E8A94F; /* = --k-warning dunkel; ≈5.57:1 auf effektivem Hintergrund #3E392D (Owner-Fix Runde 2 geprueft, ≥4.5 — unveraendert) */
  --k-danger-tint:       rgba(242, 109, 109, 0.22); /* abgeleitet, nicht gemessen */
  --k-danger-tint-text:  #F57878; /* Owner-Fix Runde 2: #F26D6D (= --k-danger dunkel) erreichte nur ≈4.40:1 auf effektivem Hintergrund #402C33 (verfehlt 4.5:1, Review-Annahme "≈5:1" traf hier nicht zu) → aufgehellt auf #F57878, ≈4.81:1; bewusst NICHT mehr identisch mit --k-danger dunkel */
  --k-navy:            #0B4A68; /* Markenflächen: Primär-Button, Panel-Kopf, Tooltip */
  --k-navy-hover:      #0D5578;
  --k-navy-active:     #094059;
  --k-blue:            #4FB3D9;
  --k-blue-hover:      #6FC3E2;
  --k-blue-active:     #3FA3C9;
  --k-blue-050:        #10303F;
  --k-surface:         #0E1A23;
  --k-surface-muted:   #14232E;
  --k-surface-sunken:  #1A2C39;
  --k-border:          #223648;
  --k-border-strong:   #34506A;
  --k-text-strong:     #E9F1F7;
  --k-text:            #D7E2EA;
  --k-text-muted:      #9AB0C0;
  --k-text-subtle:     #6E8699;
  --k-text-brand:      #9AA4AB; /* echte App hat keinen Dark Mode — gleicher Wert */
  --k-disabled-bg:     #16242E;
  --k-disabled-text:   #5B7284;
  --k-disabled-border: #223648;
  --k-success:         #4CC38A;
  --k-success-bg:      #0F2A1D;
  --k-warning:         #E8A94F;
  --k-warning-bg:      #2E2310;
  --k-danger:          #F26D6D;
  --k-danger-bg:       #331519;
  --k-info:            #4FB3D9;
  --k-info-bg:         #10303F;
  --k-overlay:         rgba(0, 0, 0, 0.6);
  --k-shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.4);
  --k-shadow-card:     0 1px 3px rgba(0, 0, 0, 0.35); /* dunkler als Light-Wert, sonst unsichtbar auf dunkler Fläche */
  --k-shadow-dropdown: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  --k-shadow-modal:    0 20px 50px rgba(0, 0, 0, 0.6);
  --k-focus-ring:      0 0 0 3px rgba(79, 179, 217, 0.4);
  }
}
:root[data-theme="dark"] {
  --k-footer-bg:       #14232E; /* wie --k-surface-muted dunkel: echte App hat keinen Dark Mode, keine eigene Messung */
  --k-success-tint:      rgba(76, 195, 138, 0.22); /* höhere Alpha als Hell (13%), sonst auf dunkler Fläche kaum sichtbar */
  --k-success-tint-text: #4CC38A; /* = --k-success dunkel; ≈5.20:1 auf effektivem Hintergrund #1C3F3A (Owner-Fix Runde 2 geprueft, ≥4.5 — unveraendert) */
  --k-warning-tint:      rgba(232, 169, 79, 0.22);
  --k-warning-tint-text: #E8A94F; /* = --k-warning dunkel; ≈5.57:1 auf effektivem Hintergrund #3E392D (Owner-Fix Runde 2 geprueft, ≥4.5 — unveraendert) */
  --k-danger-tint:       rgba(242, 109, 109, 0.22); /* abgeleitet, nicht gemessen */
  --k-danger-tint-text:  #F57878; /* Owner-Fix Runde 2: #F26D6D (= --k-danger dunkel) erreichte nur ≈4.40:1 auf effektivem Hintergrund #402C33 (verfehlt 4.5:1, Review-Annahme "≈5:1" traf hier nicht zu) → aufgehellt auf #F57878, ≈4.81:1; bewusst NICHT mehr identisch mit --k-danger dunkel */
  --k-navy:            #0B4A68; /* Markenflächen: Primär-Button, Panel-Kopf, Tooltip */
  --k-navy-hover:      #0D5578;
  --k-navy-active:     #094059;
  --k-blue:            #4FB3D9;
  --k-blue-hover:      #6FC3E2;
  --k-blue-active:     #3FA3C9;
  --k-blue-050:        #10303F;
  --k-surface:         #0E1A23;
  --k-surface-muted:   #14232E;
  --k-surface-sunken:  #1A2C39;
  --k-border:          #223648;
  --k-border-strong:   #34506A;
  --k-text-strong:     #E9F1F7;
  --k-text:            #D7E2EA;
  --k-text-muted:      #9AB0C0;
  --k-text-subtle:     #6E8699;
  --k-text-brand:      #9AA4AB; /* echte App hat keinen Dark Mode — gleicher Wert */
  --k-disabled-bg:     #16242E;
  --k-disabled-text:   #5B7284;
  --k-disabled-border: #223648;
  --k-success:         #4CC38A;
  --k-success-bg:      #0F2A1D;
  --k-warning:         #E8A94F;
  --k-warning-bg:      #2E2310;
  --k-danger:          #F26D6D;
  --k-danger-bg:       #331519;
  --k-info:            #4FB3D9;
  --k-info-bg:         #10303F;
  --k-overlay:         rgba(0, 0, 0, 0.6);
  --k-shadow-sm:       0 1px 2px rgba(0, 0, 0, 0.4);
  --k-shadow-card:     0 1px 3px rgba(0, 0, 0, 0.35); /* dunkler als Light-Wert, sonst unsichtbar auf dunkler Fläche */
  --k-shadow-dropdown: 0 10px 30px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3);
  --k-shadow-modal:    0 20px 50px rgba(0, 0, 0, 0.6);
  --k-focus-ring:      0 0 0 3px rgba(79, 179, 217, 0.4);
}