/* Plattform – gemeinsame Design-Tokens (für alle Firmen gleich)
   Pro Firma kommt nur der Akzent dazu: design/brands/<firma>/tokens.css (--app-accent-*)
   Schrift: Geist (alles), Geist Mono (Zahlen, Beträge)
   <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
   Modus: <html data-theme="light|dark">, ohne Angabe wie das Gerät */

:root {
  /* Schrift */
  --app-font: 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  --app-font-mono: 'Geist Mono', ui-monospace, monospace;
  --app-text-xs: 13px;
  --app-text-sm: 14px;
  --app-text: 16px;
  --app-text-lg: 18px;
  --app-h2: 22px;
  --app-h1: 28px;
  --app-hero: clamp(28px, 6vw, 40px);
  --app-tracking-tight: -0.02em;

  /* Abstände */
  --app-space-1: 4px;
  --app-space-2: 8px;
  --app-space-3: 12px;
  --app-space-4: 16px;
  --app-space-5: 20px;
  --app-space-6: 24px;
  --app-space-8: 32px;
  --app-space-12: 48px;
  --app-pad-x-mobile: 20px;
  --app-pad-x-desktop: 40px;
  --app-content-max: 1120px;

  /* Form */
  --app-radius-pill: 999px;
  --app-radius-card: 20px;
  --app-radius-md: 14px;
  --app-radius-sm: 10px;
  --app-tap: 44px;               /* Mindestgröße Klickfläche */

  /* Seitenleiste */
  --app-sidebar-open: 260px;
  --app-sidebar-closed: 64px;

  /* Bewegung */
  --app-ease: cubic-bezier(.2, .8, .2, 1);
  --app-speed: 180ms;
}

/* ---------- Heller Modus ---------- */
:root, :root[data-theme="light"] {
  --app-bg: #FFFFFF;
  --app-sidebar: #F7F7F8;
  --app-surface: #FFFFFF;
  --app-surface-2: #F4F4F5;
  --app-hover: rgba(0, 0, 0, 0.05);
  --app-line: #E6E6E8;
  --app-text-color: #0D0D0E;
  --app-text-muted: #5E5E66;
  --app-text-faint: #75757D;
  --app-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --app-overlay: rgba(0, 0, 0, 0.35);
  --app-logo-tile: transparent;   /* Logo mit weißem Hintergrund: im Hellen ohne Kachel */

  --app-ok: #15803D;
  --app-warn: #B45309;
  --app-bad: #C62828;
  --app-neutral: #5E5E66;
  --app-kalt: #0284C7;     /* Vertrieb: Kaltakquise (Eisblau) */
  --app-warm: #EA580C;     /* Vertrieb: warme Leads (Orange) */

  --app-accent: var(--app-accent-light);
  --app-on-accent: var(--app-on-accent-light);
  --app-accent-text: var(--app-accent-text-light);
  color-scheme: light;
}

/* ---------- Dunkler Modus ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --app-bg: #212121;
    --app-sidebar: #171717;
    --app-surface: #2A2A2A;
    --app-surface-2: #303030;
    --app-hover: rgba(255, 255, 255, 0.07);
    --app-line: rgba(255, 255, 255, 0.09);
    --app-text-color: #ECECEC;
    --app-text-muted: #ABABAB;
    --app-text-faint: #8E8E8E;
    --app-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    --app-overlay: rgba(0, 0, 0, 0.55);
    --app-logo-tile: #FFFFFF;

    --app-ok: #4ADE80;
    --app-warn: #FBBF24;
    --app-bad: #F87171;
    --app-neutral: #ABABAB;
    --app-kalt: #38BDF8;
    --app-warm: #FB923C;

    --app-accent: var(--app-accent-dark);
    --app-on-accent: var(--app-on-accent-dark);
    --app-accent-text: var(--app-accent-text-dark);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --app-bg: #212121;
  --app-sidebar: #171717;
  --app-surface: #2A2A2A;
  --app-surface-2: #303030;
  --app-hover: rgba(255, 255, 255, 0.07);
  --app-line: rgba(255, 255, 255, 0.09);
  --app-text-color: #ECECEC;
  --app-text-muted: #ABABAB;
  --app-text-faint: #8E8E8E;
  --app-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --app-overlay: rgba(0, 0, 0, 0.55);
  --app-logo-tile: #FFFFFF;

  --app-ok: #4ADE80;
  --app-warn: #FBBF24;
  --app-bad: #F87171;
  --app-neutral: #ABABAB;
  --app-kalt: #38BDF8;
  --app-warm: #FB923C;

  --app-accent: var(--app-accent-dark);
  --app-on-accent: var(--app-on-accent-dark);
  --app-accent-text: var(--app-accent-text-dark);
  color-scheme: dark;
}