/* Plattform – gemeinsame Design-Tokens (für alle Firmen gleich)
   Pro Firma kommt nur der Akzent dazu: design/brands/<firma>/tokens.css (--app-accent-*)
   Schrift: Apple-Systemschrift (SF Pro auf Mac/iPhone), sonst Geist als Ersatz
   Look: Apple (Skill apple-design, emilkowalski/skills) – Systemfarben, gruppierte Flächen, weiche Bewegung
   Modus: <html data-theme="light|dark">, ohne Angabe wie das Gerät */

:root {
  /* Schrift */
  --app-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Geist', 'Helvetica Neue', Helvetica, sans-serif;
  --app-font-mono: ui-monospace, 'SF Mono', 'Geist Mono', Menlo, 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.022em;  /* große Schrift enger */
  --app-tracking-body: -0.01em;    /* Fließtext minimal enger, wie SF Pro */

  /* 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;
  --app-content-wide: 1360px;   /* breite Seiten, z. B. Paket-Angebot am Computer */

  /* Form */
  --app-radius-pill: 999px;
  --app-radius-card: 16px;
  --app-radius-md: 12px;
  --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(.32, .72, 0, 1);     /* Apple-Kurve (Sheets/Schubladen) */
  --app-ease-out: cubic-bezier(.23, 1, .32, 1);   /* Rein-Animationen */
  --app-speed: 200ms;
  --app-speed-press: 120ms;                      /* Druck-Feedback */
  --app-press: .97;                              /* Button wird beim Drücken so viel kleiner */
  --app-blur: saturate(180%) blur(20px);         /* Glas-Effekt */

  /* Automatisier Mail: immer Automatisier-Blau, egal welche Firma (Werte aus design/brands/automatisier/tokens.css) */
  --mail-accent-light: #4a4ed6;
  --mail-on-accent-light: #ffffff;
  --mail-accent-text-light: #4a4ed6;
  --mail-accent-dark: #4a4ed6;
  --mail-on-accent-dark: #ffffff;
  --mail-accent-text-dark: #8f92f0;

  /* Fremd-Logos in der Planung (echte Markenfarben, Logos aus Simple Icons) */
  --logo-linkedin: #0A66C2;
  --logo-facebook: #0866FF;
  --logo-instagram: #FF0069;
  --logo-claude: #D97757;
  --logo-on: #FFFFFF;
}

/* ---------- Heller Modus ---------- */
:root, :root[data-theme="light"] {
  --app-bg: #F5F5F7;              /* Apple: gruppierter Hintergrund */
  --app-sidebar: #ECECF0;
  --app-surface: #FFFFFF;
  --app-surface-2: #EEEEF1;
  --app-hover: rgba(118, 118, 128, 0.12);
  --app-line: rgba(60, 60, 67, 0.13);
  --app-text-color: #1D1D1F;
  --app-text-muted: #6E6E73;
  --app-text-faint: #737378;
  --app-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.10);
  --app-card-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.05);
  --app-overlay: rgba(0, 0, 0, 0.28);
  --app-glass: rgba(245, 245, 247, 0.72);
  --app-logo-tile: transparent;   /* Logo mit weißem Hintergrund: im Hellen ohne Kachel */

  --app-ok: #248A3D;       /* Apple-Systemfarben, barrierearme Varianten */
  --app-warn: #B25000;
  --app-bad: #D70015;
  --app-neutral: #6E6E73;
  --app-kalt: #0071A4;     /* Vertrieb: Kaltakquise (Eisblau) */
  --app-warm: #C93400;     /* Vertrieb: warme Leads (Orange) */
  --app-gelb: #946300;     /* Vertrieb: Nicht erreicht */

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

/* ---------- Dunkler Modus ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --app-bg: #000000;
    --app-sidebar: #1C1C1E;
    --app-surface: #1C1C1E;
    --app-surface-2: #2C2C2E;
    --app-hover: rgba(118, 118, 128, 0.24);
    --app-line: rgba(84, 84, 88, 0.55);
    --app-text-color: #F5F5F7;
    --app-text-muted: #A1A1A6;
    --app-text-faint: #8E8E93;
    --app-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.5);
    --app-card-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.06);
    --app-overlay: rgba(0, 0, 0, 0.5);
    --app-glass: rgba(28, 28, 30, 0.72);
    --app-logo-tile: #FFFFFF;

    --app-ok: #30D158;
    --app-warn: #FF9F0A;
    --app-bad: #FF453A;
    --app-neutral: #A1A1A6;
    --app-kalt: #64D2FF;
    --app-warm: #FF9F0A;
    --app-gelb: #FFD60A;

    --app-accent: var(--app-accent-dark);
    --app-on-accent: var(--app-on-accent-dark);
    --app-accent-text: var(--app-accent-text-dark);
    --mail-accent: var(--mail-accent-dark);
    --mail-on-accent: var(--mail-on-accent-dark);
    --mail-accent-text: var(--mail-accent-text-dark);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --app-bg: #000000;
  --app-sidebar: #1C1C1E;
  --app-surface: #1C1C1E;
  --app-surface-2: #2C2C2E;
  --app-hover: rgba(118, 118, 128, 0.24);
  --app-line: rgba(84, 84, 88, 0.55);
  --app-text-color: #F5F5F7;
  --app-text-muted: #A1A1A6;
  --app-text-faint: #8E8E93;
  --app-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px rgba(0, 0, 0, 0.5);
  --app-card-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.06);
  --app-overlay: rgba(0, 0, 0, 0.5);
  --app-glass: rgba(28, 28, 30, 0.72);
  --app-logo-tile: #FFFFFF;

  --app-ok: #30D158;
  --app-warn: #FF9F0A;
  --app-bad: #FF453A;
  --app-neutral: #A1A1A6;
  --app-kalt: #64D2FF;
  --app-warm: #FF9F0A;
  --app-gelb: #FFD60A;

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