/* Kopie aus dem teamzone Design System (Prototyp, tokens/), Stand 2026-10-20. Nicht hier ändern — Abweichungen gehören in sass/site.scss. */
/* ============================================================
   teamzone — Color tokens
   LEAD (Phase B, seit 07/2026): DIESES Design System führt. Die Flutter-App
   (frontend/lib/provider/theme.dart) ist SYNC-ZIEL, nicht Quelle — Deltas
   laufen über Change-Backlog.md + Handoff-Flutter.md.
   Die Light-Werte hier entsprechen dem Ist-Stand von theme.dart (Phase-A-
   Nachbau, „code wins“ bis CB-001); das Figma-M3-Soll liegt separat in
   tokens/fig-soll/fig-tokens.css und wird erst mit CB-001 übernommen —
   nie beide Wertewelten mischen. Hinweis: #fcf8f9 ist hier bewusst NUR
   surfaceContainerHigh (wie im Code); Figma-Soll-surface ≠ Ist-surface.
   The Material 3 ColorScheme defines THREE brand colors:
     primary   = #850055  (magenta)   onPrimary  = #ffffff
     secondary = #00ad8c  (teal)      onSecondary= #ffffff
     tertiary  = #dee263  (lime)      onTertiary = #2c2c2c
   Swatches (50..900) are generated with theme.dart's tint/shade algorithm:
     tint(c,f)  = c + (255-c)*f   (50:.9 100:.8 200:.6 300:.4 400:.2)
     shade(c,f) = c*(1-f)         (600:.1 700:.2 800:.3 900:.4)
   Brand colors are themeable per tenant: override --tz-primary / --tz-secondary
   / --tz-tertiary (and, ideally, their scales) on :root to re-skin.
   ============================================================ */

:root {
  /* ============================================================
     BRAND — raw scales (light)
     ============================================================ */

  /* ---- Primary (magenta) · base #850055 ---- */
  --tz-primary-50:  rgb(243, 230, 238);
  --tz-primary-100: rgb(231, 204, 221);
  --tz-primary-200: rgb(206, 153, 187);  /* primaryColorLight — avatar bg */
  --tz-primary-300: rgb(182, 102, 153);
  --tz-primary-400: rgb(157, 51, 119);
  --tz-primary-500: rgb(133, 0, 85);      /* ★ ColorScheme.primary */
  --tz-primary-600: rgb(120, 0, 77);
  --tz-primary-700: rgb(106, 0, 68);
  --tz-primary-800: rgb(93, 0, 60);
  --tz-primary-900: rgb(80, 0, 51);
  --tz-primary:     var(--tz-primary-500);

  /* ---- Secondary (teal) · base #00ad8c ---- */
  --tz-secondary-50:  rgb(230, 247, 244);
  --tz-secondary-100: rgb(204, 239, 232);
  --tz-secondary-200: rgb(153, 222, 209);
  --tz-secondary-300: rgb(102, 206, 186);
  --tz-secondary-400: rgb(51, 189, 163);
  --tz-secondary-500: rgb(0, 173, 140);   /* ★ ColorScheme.secondary */
  --tz-secondary-600: rgb(0, 156, 126);
  --tz-secondary-700: rgb(0, 138, 112);
  --tz-secondary-800: rgb(0, 121, 98);
  --tz-secondary-900: rgb(0, 104, 84);
  --tz-secondary:     var(--tz-secondary-500);

  /* ---- Tertiary (lime) · base #dee263 ---- */
  --tz-tertiary-50:  rgb(252, 252, 239);
  --tz-tertiary-100: rgb(248, 249, 224);
  --tz-tertiary-200: rgb(242, 243, 193);
  --tz-tertiary-300: rgb(235, 238, 161);
  --tz-tertiary-400: rgb(229, 232, 130);
  --tz-tertiary-500: rgb(222, 226, 99);   /* ★ ColorScheme.tertiary */
  --tz-tertiary-600: rgb(200, 203, 89);
  --tz-tertiary-700: rgb(178, 181, 79);
  --tz-tertiary-800: rgb(155, 158, 69);
  --tz-tertiary-900: rgb(133, 136, 59);
  --tz-tertiary:     var(--tz-tertiary-500);

  /* ---- Neutral / grey (M3 neutral, warm) ---- */
  --tz-grey-0: rgb(246, 243, 243);
  --tz-grey-1: rgb(229, 226, 226);
  --tz-grey-2: rgb(199, 198, 204);   /* outlineVariant */
  --tz-grey-3: rgb(168, 167, 173);
  --tz-grey-4: rgb(143, 143, 150);
  --tz-grey-5: rgb(118, 118, 125);   /* outline */
  --tz-grey-6: rgb(95, 95, 102);
  --tz-grey-7: rgb(70, 70, 76);      /* onSurfaceVariant */
  --tz-grey-8: rgb(52, 51, 56);
  --tz-grey-9: rgb(28, 27, 27);      /* onSurface */

  /* ---- Base ---- */
  --tz-black:   rgb(28, 27, 27);     /* onSurface #1c1b1b */
  --tz-white:   rgb(255, 255, 255);

  /* ---- Material surface scheme (light) — from theme.dart ---- */
  --tz-surface:                   rgb(246, 243, 243);  /* #f6f3f3 */
  --tz-surface-dim:               rgb(222, 219, 220);
  --tz-surface-bright:            rgb(252, 248, 249);
  --tz-surface-container-lowest:  rgb(255, 255, 255);
  --tz-surface-container-low:     rgb(246, 243, 243);  /* #f6f3f3 */
  --tz-surface-container:         rgb(243, 240, 241);
  --tz-surface-container-high:    rgb(252, 248, 249);  /* #fcf8f9 */
  --tz-surface-container-highest: rgb(255, 255, 255);  /* #ffffff (cards) */

  /* ---- Status ---- */
  --tz-error:   rgb(235, 69, 69);    /* #eb4545 ColorScheme.error */
  --tz-success: rgb(0, 156, 126);    /* teal-derived positive */
  --tz-warning: rgb(204, 102, 0);

  /* ---- Alternate accents (avatars / categories) ---- */
  --tz-alt-a:    rgb(133, 0, 85);    /* magenta */
  --tz-alt-a-bg: rgb(243, 230, 238);
  --tz-alt-b:    rgb(172, 60, 0);    /* rust */
  --tz-alt-b-bg: rgb(245, 235, 230);
  --tz-alt-c:    rgb(0, 121, 98);    /* deep teal */
  --tz-alt-c-bg: rgb(204, 239, 232);

  /* ============================================================
     SEMANTIC aliases — reference THESE in components.
     They flip under [data-theme="dark"] below.
     ============================================================ */

  /* Text / on-colors */
  --text-default:      rgb(28, 27, 27);     /* onSurface */
  --text-muted:        rgb(70, 70, 76);     /* onSurfaceVariant */
  --text-subtle:       rgb(118, 118, 125);  /* outline tone */
  --text-on-primary:   var(--tz-white);
  --text-on-secondary: var(--tz-white);
  --text-on-tertiary:  rgb(44, 44, 44);     /* onTertiary #2c2c2c */
  --text-primary:      var(--tz-primary-500);
  --text-link:         var(--tz-primary-500);
  --text-inactive:     rgb(118, 118, 125);
  --text-appbar-title: rgb(41, 33, 36);     /* appBar #292124 */

  /* Surfaces / backgrounds */
  --surface-page:        var(--tz-surface);                  /* #f6f3f3 */
  --surface-card:        var(--tz-surface-container-highest); /* #ffffff */
  --surface-low:         var(--tz-surface-container-low);    /* #f6f3f3 */
  --surface-high:        var(--tz-surface-container-high);   /* #fcf8f9 */
  --surface-content:     rgb(253, 252, 253);                 /* #fdfcfd — Plugin-Content-Grund: heller als surface-high, hebt sich von Rail/Sidebar ab; weiße Karten liegen sauber auf (Flächenrezept 15.07.2026) */
  --surface-alt:         var(--tz-surface-container);
  --surface-highlight:   var(--tz-tertiary-200);            /* lime selected-row wash */
  --surface-highlight-primary: color-mix(in srgb, var(--tz-primary) 6%, var(--tz-surface-container-high)); /* Tabellen-Kopfzeile (table_grid_header.dart: primary @6% auf surfaceContainerHigh) */
  --vc-controls-bg: rgb(88, 93, 113);  /* Videokonferenz-Steuerleiste (outlet.dart: Color.fromRGBO(0x58,0x5d,0x71)) */
  --vc-hand-raised: rgb(255, 193, 7);  /* „Hand heben" aktiv (outlet.dart: Colors.amber) */
  --vc-name-pill: rgb(49, 48, 49);     /* Teilnehmer-Namensschild (Figma VC: #313031, r8) */
  --vc-name-pill-fg: rgb(243, 240, 240);
  --surface-inactive:    var(--tz-grey-1);
  --surface-menu:        var(--tz-surface-container-high);   /* popup #fcf8f9 */
  --surface-overlay:     rgba(28, 27, 27, 0.40);             /* scrim */
  --overlay-viewer-strong: rgba(0, 0, 0, 0.87);              /* Medien-Viewer-Chrome (Flutter black87) */
  --overlay-viewer:      rgba(0, 0, 0, 0.54);                /* Medien-Viewer-Buttons (Flutter black54) */
  --overlay-hover-dark:  rgba(22, 22, 22, 0.06);             /* Hover-Wash auf hellen/transparenten Flächen */
  --overlay-hover-light: rgba(255, 255, 255, 0.14);          /* Hover-Aufhellung auf gefüllten dunklen Flächen (≈ primary@85%) */
  --overlay-hover-soft:  rgba(22, 22, 22, 0.03);             /* Z.109: großflächige Ziele (Karten ab ~150px) — Deckung sinkt mit wachsender Fläche */

  /* Inverse Fläche (M3 inverseSurface/onInverseSurface) — Toasts und Snackbars.
     Nachtrag 08.09.2026 (B-126, Achse 8): war in fünf Screens als var(--tz-inverse-surface)
     mit Hex-Fallback benutzt, ohne je definiert zu sein. */
  --tz-inverse-surface:    rgb(50, 47, 51);
  --tz-inverse-on-surface: rgb(245, 239, 241);

  /* Accents */
  --accent-primary:        var(--tz-primary-500);
  --accent-primary-hover:  var(--tz-primary-600);
  --accent-primary-light:  var(--tz-primary-200);  /* primaryColorLight */
  --accent-primary-container: var(--tz-primary-100);
  --accent-secondary:        var(--tz-secondary-500);   /* TEAL */
  --accent-secondary-container: var(--tz-secondary-100);
  --accent-tertiary:        var(--tz-tertiary-500);     /* LIME */
  --accent-tertiary-container: var(--tz-tertiary-100);
  --accent-tertiary-bar:    var(--tz-tertiary-500);     /* nav active rail bar — Nutzerentscheid 09.07.2026: Brand-Lime bleibt (W-26 verworfen) */

  /* Borders / outlines */
  --border-default:    var(--tz-grey-2);   /* outlineVariant */
  --border-light:      var(--tz-grey-1);
  --border-strong:     var(--tz-grey-5);   /* outline */
  --border-divider:    var(--tz-grey-2);
  --border-chrome:     rgb(225, 223, 225); /* light hairline on toolbar buttons / icon squares */

  /* Status */
  --status-error:   var(--tz-error);
  --status-success: var(--tz-success);
  --status-warning: var(--tz-warning);
  --on-status:      var(--tz-white);
  /* CB-046: Warn-Flächen (Systembanner, Warnmeldungs-Header) — aus Tokens abgeleitet, nie hartkodiert */
  --status-warning-container: color-mix(in srgb, var(--status-warning) 12%, var(--surface-card));
  --status-warning-border:    color-mix(in srgb, var(--status-warning) 40%, var(--surface-card));
  /* Z.65-8: Erfolgs-/Verifiziert-Flächen (Expertenbeitrag-Kennzeichnung) */
  --status-success-container:    color-mix(in srgb, var(--status-success) 10%, var(--surface-card));
  --status-success-on-container: color-mix(in srgb, var(--status-success) 52%, var(--tz-black, #000));

  /* ---- Legacy compatibility aliases (pre-code-sync names) ----
     Older components/cards referenced these; kept pointing at the
     corrected scale so nothing breaks. Prefer the names above. */
  --tz-primary-0:    var(--tz-primary-50);
  --tz-primary-1:    var(--tz-primary-100);
  --tz-primary-5:    var(--tz-primary-400);
  --tz-primary-9:    var(--tz-primary-500);
  --tz-primary-deep: var(--tz-primary-600);
  --accent-primary-bright:   var(--tz-primary-400);
  --accent-secondary-fill:   var(--tz-secondary-100);
  --surface-container:       var(--tz-surface-container);

  /* ============================================================
     IDENTITÄTSPALETTE — Raum-/Personen-Marken (Z.60, 07.08.2026)
     Aus dem Brand-Token abgeleitet: gleiche Helligkeit/Sättigung wie
     die Marke, nur die Buntheit rotiert (8 × 45°) — dadurch harmonisch
     und beim Tenant-Theming automatisch mitdrehend.
     Stufe „Wahrnehmungsschwelle": Fläche L .955 / C .018,
     Monogramm L .42 / C .04 (Entscheid 07.08.2026, Variante 4b).
     Zuordnung Initialen → Ton macht AUSSCHLIESSLICH der DS-Avatar
     (identityTone), nie die Call-Site.
     ============================================================ */
  --ident-1-bg: oklch(from var(--tz-primary-500) 0.955 0.018 calc(h + 0));
  --ident-1-fg: oklch(from var(--tz-primary-500) 0.42 0.04 calc(h + 0));
  --ident-1-line: oklch(from var(--tz-primary-500) 0.88 0.035 calc(h + 0));
  --ident-2-bg: oklch(from var(--tz-primary-500) 0.955 0.018 calc(h + 45));
  --ident-2-fg: oklch(from var(--tz-primary-500) 0.42 0.04 calc(h + 45));
  --ident-2-line: oklch(from var(--tz-primary-500) 0.88 0.035 calc(h + 45));
  --ident-3-bg: oklch(from var(--tz-primary-500) 0.955 0.018 calc(h + 90));
  --ident-3-fg: oklch(from var(--tz-primary-500) 0.42 0.04 calc(h + 90));
  --ident-3-line: oklch(from var(--tz-primary-500) 0.88 0.035 calc(h + 90));
  --ident-4-bg: oklch(from var(--tz-primary-500) 0.955 0.018 calc(h + 135));
  --ident-4-fg: oklch(from var(--tz-primary-500) 0.42 0.04 calc(h + 135));
  --ident-4-line: oklch(from var(--tz-primary-500) 0.88 0.035 calc(h + 135));
  --ident-5-bg: oklch(from var(--tz-primary-500) 0.955 0.018 calc(h + 180));
  --ident-5-fg: oklch(from var(--tz-primary-500) 0.42 0.04 calc(h + 180));
  --ident-5-line: oklch(from var(--tz-primary-500) 0.88 0.035 calc(h + 180));
  --ident-6-bg: oklch(from var(--tz-primary-500) 0.955 0.018 calc(h + 225));
  --ident-6-fg: oklch(from var(--tz-primary-500) 0.42 0.04 calc(h + 225));
  --ident-6-line: oklch(from var(--tz-primary-500) 0.88 0.035 calc(h + 225));
  --ident-7-bg: oklch(from var(--tz-primary-500) 0.955 0.018 calc(h + 270));
  --ident-7-fg: oklch(from var(--tz-primary-500) 0.42 0.04 calc(h + 270));
  --ident-7-line: oklch(from var(--tz-primary-500) 0.88 0.035 calc(h + 270));
  --ident-8-bg: oklch(from var(--tz-primary-500) 0.955 0.018 calc(h + 315));
  --ident-8-fg: oklch(from var(--tz-primary-500) 0.42 0.04 calc(h + 315));
  --ident-8-line: oklch(from var(--tz-primary-500) 0.88 0.035 calc(h + 315));

  /* ============================================================
     KATEGORIALPALETTE — Kalenderfarben (Z.18/CB, 14.07.2026)
     SOURCE OF TRUTH: plugins/calendar/widgets/connections_sheet.dart
     (kCalendarColors, Branch feature/calendar-plugin). Freie Farbe je
     Kalenderquelle (Server-Farbe oder Override); enthält bewusst KEIN
     Brand-Magenta (Z.13: Primary bleibt Interaktion/Zustand/Heute).
     Call-Sites nutzen NUR var(--cal-n) — nie Hex.
     ============================================================ */
  --cal-1: rgb(59, 130, 246);   /* Blau    #3B82F6 */
  --cal-2: rgb(239, 68, 68);    /* Rot     #EF4444 */
  --cal-3: rgb(16, 185, 129);   /* Grün    #10B981 */
  --cal-4: rgb(245, 158, 11);   /* Orange  #F59E0B */
  --cal-5: rgb(139, 92, 246);   /* Violett #8B5CF6 */
  --cal-6: rgb(236, 72, 153);   /* Pink    #EC4899 */
  --cal-7: rgb(20, 184, 166);   /* Türkis  #14B8A6 */
  --cal-8: rgb(107, 114, 128);  /* Grau    #6B7280 */
}

/* ============================================================
   DARK THEME
   theme.dart ships only a cyan seed stub for dark; this is a proper
   brand-consistent M3 dark scheme extending the same hues.
   Applied via [data-theme="dark"] or the OS preference.
   ============================================================ */
:root[data-theme="dark"] {
  /* ============================================================
     DARK-ABLEITUNG (CB-057/Z.30): Dark rechnet sich aus der Light-Marke.
     Quelle = die NICHT überschriebenen Light-Scales var(--tz-*-500).
     Vier globale Tuning-Knöpfe steuern den Look; per-Tenant genügt die
     Light-Marke. Hue-agnostisch (Magenta/Grün/Orange…), Kontrast durch
     feste Dark-Flächen + feste Akzent-L, Gamut-Clamp via min(c, cmax).
     ============================================================ */
  --d-accent-l:    0.80;   /* Helligkeit heller Fills/Akzent */
  --d-accent-cmax: 0.07;   /* Chroma-Deckel (entsättigt „edel") */
  --d-cont-l:      0.26;   /* Helligkeit dunkler Container */
  --d-cont-cmul:   0.70;   /* Chroma-Faktor der Container */

  /* Akzent / helle Fills — abgeleitet */
  --tz-primary:   oklch(from var(--tz-primary-500)   var(--d-accent-l) min(c, var(--d-accent-cmax)) h);
  --tz-secondary: oklch(from var(--tz-secondary-500) var(--d-accent-l) min(c, var(--d-accent-cmax)) h);
  /* Tertiär = Aktiv-Indikator: Brand-Lime bleibt bewusst hell/satt (Z.1) */
  --tz-tertiary:  rgb(229, 232, 130);

  /* Dunkle Brand-Container -50/-100/-200 + a:hover -700 — abgeleitet */
  --tz-primary-50:  oklch(from var(--tz-primary-500) calc(var(--d-cont-l) - 0.05) calc(c * var(--d-cont-cmul)) h);
  --tz-primary-100: oklch(from var(--tz-primary-500) var(--d-cont-l)              calc(c * var(--d-cont-cmul)) h);
  --tz-primary-200: oklch(from var(--tz-primary-500) calc(var(--d-cont-l) + 0.10) calc(c * var(--d-cont-cmul)) h);
  --tz-primary-700: oklch(from var(--tz-primary-500) 0.86 min(c, var(--d-accent-cmax)) h);  /* a:hover heller */

  /* Surface ladder (warm neutral, dark) */
  --tz-surface:                   rgb(20, 19, 20);
  --tz-surface-dim:               rgb(20, 19, 20);
  --tz-surface-bright:            rgb(59, 56, 58);
  --tz-surface-container-lowest:  rgb(15, 14, 15);
  --tz-surface-container-low:     rgb(28, 27, 28);
  --tz-surface-container:         rgb(33, 31, 33);
  --tz-surface-container-high:    rgb(43, 41, 43);
  --tz-surface-container-highest: rgb(54, 52, 54);

  --tz-white: rgb(255, 255, 255);   /* unchanged literal */

  /* Greys re-tuned so component raw refs read correctly in dark */
  --tz-grey-0: rgb(33, 31, 33);
  --tz-grey-1: rgb(54, 52, 54);
  --tz-grey-2: rgb(70, 70, 76);

  /* Text / on-colors */
  --text-default:      rgb(230, 225, 225);
  --text-muted:        rgb(199, 198, 204);
  --text-subtle:       rgb(144, 143, 150);
  --text-on-primary:   oklch(from var(--tz-primary-500) 0.20 calc(c * 0.5) h);
  --text-on-secondary: oklch(from var(--tz-secondary-500) 0.20 calc(c * 0.5) h);
  --text-on-tertiary:  rgb(44, 44, 44);
  --text-primary:      var(--tz-primary);
  --text-link:         var(--tz-primary);
  --text-inactive:     rgb(144, 143, 150);
  --text-appbar-title: rgb(237, 232, 232);

  /* Surfaces */
  --surface-page:      var(--tz-surface);
  --surface-card:      var(--tz-surface-container);
  --surface-content:   rgb(26, 25, 26);   /* Plugin-Content-Grund dark: zwischen page (20) und card (33), damit Karten aufliegen */
  --surface-low:       var(--tz-surface-container-low);
  --surface-high:      var(--tz-surface-container-high);
  --surface-alt:       var(--tz-surface-container-high);
  --surface-highlight: rgba(255, 176, 220, 0.16);
  --surface-inactive:  var(--tz-surface-container-high);
  --surface-menu:      var(--tz-surface-container-high);
  --surface-overlay:   rgba(0, 0, 0, 0.60);
  --tz-inverse-surface:    rgb(232, 225, 228);
  --tz-inverse-on-surface: rgb(45, 42, 46);

  /* Accents */
  --accent-primary:           var(--tz-primary);
  --accent-primary-hover:      rgb(255, 200, 230);
  --accent-primary-light:      rgb(120, 0, 77);
  --accent-primary-container:  rgb(106, 0, 68);
  --accent-secondary:          var(--tz-secondary);
  --accent-secondary-container: rgb(0, 121, 98);
  --accent-tertiary:           var(--tz-tertiary);
  --accent-tertiary-container: rgb(155, 158, 69);
  --accent-tertiary-bar:       var(--tz-tertiary);

  /* Borders */
  --border-default: rgb(70, 70, 76);
  --border-light:   rgb(54, 52, 54);
  --border-strong:  rgb(144, 143, 150);
  --border-divider: rgb(70, 70, 76);
  --border-chrome:  rgb(64, 62, 64);

  /* Status */
  --status-error:   rgb(255, 138, 128);
  --status-success: rgb(102, 206, 186);
  --status-warning: rgb(255, 178, 102);
  --on-status:      rgb(40, 0, 0);
  --overlay-hover-dark:  rgba(255, 255, 255, 0.08);          /* Dark: Wash hellt auf, sonst ist er unsichtbar */
  --overlay-hover-light: rgba(255, 255, 255, 0.10);
  --overlay-hover-soft:  rgba(255, 255, 255, 0.04);
  --status-warning-container: color-mix(in srgb, var(--status-warning) 20%, var(--surface-card));
  --status-success-container:    color-mix(in srgb, var(--status-success) 18%, var(--surface-card));
  --status-success-on-container: color-mix(in srgb, var(--status-success) 62%, var(--tz-white, #fff));
  --status-warning-border:    color-mix(in srgb, var(--status-warning) 45%, var(--surface-card));
}

/* OS-preference dark: opt in by setting data-theme="dark" on <html> (a one-line
   script can mirror prefers-color-scheme). Kept as an explicit scope so every
   token registers as a design-system token. */