/* Atrium · Design Tokens
 *
 * Single source of truth for colors, typography, spacing, radii, shadows,
 * motion. Admin-konfigurierbare Overrides werden zur Runtime nach diesem
 * Stylesheet aus /api/theme.css nachgeladen und überschreiben die hier
 * gesetzten Custom Properties.
 *
 * Reading this file:
 *   :root       → Light-Theme (Default)
 *   html.dark   → Dark-Theme Override
 *
 * Kein SCSS — bewusst plain CSS mit Custom Properties, damit Org-Admins
 * Werte live patchen können ohne Rebuild.
 */

/* ══════════════════════════════════════════════════════════════════════
 *  Light Theme (Default)
 * ═════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Paper / Ink ─────────────────────────────────────────────────── */
  --paper:        #FAFAFA;
  --paper-2:      #F4F4F5;
  --paper-3:      #E4E4E7;
  --card:         #FFFFFF;
  --card-2:       #F9FAFB;
  /* Alias used by several plugin-bundles. Keep in sync with --card
     so a card-based component renders correctly under both themes. */
  --surface:      var(--card);

  --ink:          #0A0A0A;
  --ink-2:        #171717;
  --ink-3:        #525252;
  --ink-4:        #A3A3A3;
  --ink-5:        #D4D4D8;

  /* ── Borders ─────────────────────────────────────────────────────── */
  --border:       #E5E5E5;
  --border-2:     #D4D4D8;
  --hairline:     #F0F0F0;

  /* ── Accent (admin-override-fähig) ──────────────────────────────── */
  --accent:         #059669;
  --accent-strong:  #047857;
  --accent-soft:    #DCFCE7;
  --accent-tint:    rgba(5, 150, 105, 0.12);
  --accent-ring:    rgba(5, 150, 105, 0.20);
  --accent-on:      #ffffff;  /* Foreground für Brand-Buttons */

  /* ── Status ──────────────────────────────────────────────────────── */
  --ok:           #059669;
  --ok-tint:      #DCFCE7;
  --warn:         #D97706;
  --warn-tint:    #FEF3C7;
  --error:        #DC2626;
  --error-tint:   #FEE2E2;
  --info:         #2563EB;
  --info-tint:    #DBEAFE;

  /* ── Badge-Palette (2-letter Connector-Badges) ──────────────────── */
  --badge-1:      #2563EB;  /* blue   */
  --badge-2:      #059669;  /* green  */
  --badge-3:      #7C3AED;  /* purple */
  --badge-4:      #EA580C;  /* orange */
  --badge-5:      #0891B2;  /* cyan   */
  --badge-6:      #DB2777;  /* pink   */
  --badge-7:      #CA8A04;  /* amber  */
  --badge-8:      #475569;  /* slate  */
  --badge-9:      #DC2626;  /* red    */
  --badge-10:     #0284C7;  /* sky    */

  /* ── Typografie ──────────────────────────────────────────────────── */
  --font-ui:    "Inter", ui-sans-serif, system-ui, -apple-system,
                "Segoe UI", Roboto, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
                Consolas, monospace;

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-20: 20px;
  --fs-28: 28px;
  --fs-36: 36px;

  --lh-tight: 1.2;
  --lh-body:  1.5;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;

  /* ── Spacing (6-Grid) ────────────────────────────────────────────── */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;

  /* ── Radii ───────────────────────────────────────────────────────── */
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   10px;
  --r-xl:   14px;
  --r-full: 999px;

  /* ── Shadows (sparsam) ───────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.06),
               0 8px 24px rgba(0, 0, 0, 0.04);

  /* ── Motion ──────────────────────────────────────────────────────── */
  --motion-fast:  120ms cubic-bezier(0.2, 0, 0, 1);
  --motion-med:   200ms cubic-bezier(0.2, 0, 0, 1);
  --motion-slow:  320ms cubic-bezier(0.2, 0, 0, 1);

  /* ── Layout ──────────────────────────────────────────────────────── */
  --sidebar-w:  240px;
  --topbar-h:   56px;
  --page-max:   1280px;
  --content-pad: var(--s-6);

  /* ── Focus-Ring ──────────────────────────────────────────────────── */
  --focus-ring: 0 0 0 3px var(--accent-ring);

  /* ── z-index Layer ───────────────────────────────────────────────── */
  --z-sidebar:  10;
  --z-topbar:   20;
  --z-popover:  40;
  --z-modal:    60;
  --z-toast:    80;

  /* ── Chart-Flächen (Mini-Sparklines) ─────────────────────────────── */
  --chart-line:  var(--ink);
  --chart-fill:  #E5E5E5;
  --chart-error: var(--error);
  --chart-error-fill: var(--error-tint);

  /* Aliases used by inline-style code in some HTML pages. The chat
     empty-state cards (Daten & Apps, Eigenes Wissen) reference these
     names directly (e.g. ``background: var(--surface-1, #fff)``).
     Without the alias the fallback ``#fff`` wins in dark-mode, breaking
     the visual. Light-mode values mirror the canonical tokens above. */
  --surface-1:       var(--paper);
  --surface-2:       var(--paper-2);
  --surface-3:       #d1d5db;
  --text-primary:    var(--ink);
  --text-secondary:  var(--ink-3);

  color-scheme: light;
}

/* ══════════════════════════════════════════════════════════════════════
 *  Dark Theme
 * ═════════════════════════════════════════════════════════════════════ */

html.dark {
  --paper:        #0A0A0A;
  --paper-2:      #171717;
  --paper-3:      #262626;
  --card:         #141414;
  --card-2:       #1F1F1F;

  --ink:          #FAFAFA;
  --ink-2:        #E4E4E7;
  --ink-3:        #A3A3A3;
  --ink-4:        #737373;
  --ink-5:        #525252;

  --border:       #262626;
  --border-2:     #404040;
  --hairline:     #1F1F1F;

  --accent:         #10B981;
  --accent-strong:  #34D399;
  --accent-soft:    #052E1F;
  --accent-tint:    rgba(16, 185, 129, 0.18);
  --accent-ring:    rgba(16, 185, 129, 0.28);

  --ok:           #10B981;
  --ok-tint:      #052E1F;
  --warn:         #F59E0B;
  --warn-tint:    #2D1E05;
  --error:        #F87171;
  --error-tint:   #2D0B0B;
  --info:         #60A5FA;
  --info-tint:    #0B1E3B;

  /* Badges im Dark leicht weicher */
  --badge-1:      #3B82F6;
  --badge-2:      #10B981;
  --badge-3:      #A78BFA;
  --badge-4:      #FB923C;
  --badge-5:      #22D3EE;
  --badge-6:      #F472B6;
  --badge-7:      #FACC15;
  --badge-8:      #94A3B8;
  --badge-9:      #F87171;
  --badge-10:     #38BDF8;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.50),
               0 12px 32px rgba(0, 0, 0, 0.40);

  --chart-line:  var(--ink-2);
  --chart-fill:  #262626;
  --chart-error: var(--error);
  --chart-error-fill: var(--error-tint);

  /* Dark-mode overrides for the inline-style aliases (see light-mode
     block for rationale). Values mirror the canonical dark tokens above
     so a card declared ``background: var(--surface-1, #fff)`` gets the
     dark surface, not the white fallback. */
  --surface-1:       var(--paper);
  --surface-2:       var(--paper-2);
  --surface-3:       #3f3f46;
  --text-primary:    var(--ink);
  --text-secondary:  var(--ink-3);

  color-scheme: dark;
}

/* ══════════════════════════════════════════════════════════════════════
 *  Base-Reset (minimal)
 * ═════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  /* Hintergrund auch auf html: während eines MPA view-transition
     rendert der Browser kurz die ``html``-Fläche zwischen Old-Snapshot
     und New-Render — ohne expliziten Wert fällt der UA auf weiß
     zurück, was im Dark-Mode als kurzer weißer Flash sichtbar wird.
     Beide Layer auf --paper setzen schließt die Lücke. */
  background: var(--paper);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
}

code, pre, .mono {
  font-family: var(--font-mono);
  font-feature-settings: "liga" 0;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

::selection {
  background: var(--accent-tint);
}

/* ── Toggle Switch (project-wide) ─────────────────────────────────
   Apply to any <input type="checkbox"> to render a pill-style
   toggle instead of a checkbox. Use anywhere we ask the user a
   binary on/off question — never the native checkbox box. */
.atrium-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 20px;
  background: var(--surface-3, #d1d5db);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  outline: none;
  transition: background 0.2s ease-in-out;
  margin: 0;
  flex-shrink: 0;
}
body.theme-dark .atrium-toggle {
  background: var(--surface-3, #3f3f46);
}
.atrium-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s ease-in-out;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.atrium-toggle:checked {
  background: var(--accent, #0066ff);
}
.atrium-toggle:checked::after {
  transform: translateX(16px);
}
.atrium-toggle:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.atrium-toggle:focus-visible {
  box-shadow: 0 0 0 2px var(--accent-tint, rgba(0,102,255,0.3));
}