/* ─────────────────────────────────────────────────────────────────────────
   AllDesk Software – Design-Tokens der Website
   Eine Quelle fuer alle Seiten von www.alldesk-erp.de.

   Aufbau (drei Zustaende, damit Hell/Dunkel in jedem Fall aufgeht):
     :root                                   -> vollstaendige Hell-Palette
     @media (prefers-color-scheme: dark)     -> Systemwunsch dunkel
       :root:not([data-theme="light"])          (explizit Hell gewinnt)
     :root[data-theme="dark"]                -> explizit Dunkel gewinnt

   Regel: Farben NIE direkt in eine Media-/[data-theme]-Regel schreiben,
   sondern immer ueber diese Tokens. Sonst bleibt in einem der Zustaende
   heller Text auf hellem Grund stehen.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Flaechen */
  --bg:            #f4f6f8;   /* Seitengrund */
  --panel:         #ffffff;   /* Karten, Dialoge, Navigation */
  --panel-2:       #eef2f6;   /* ruhige Fuellflaeche, Abschnittswechsel */

  /* Text */
  --ink:           #151b22;   /* Fliesstext */
  --ink-soft:      #485460;   /* Sekundaertext */
  --ink-faint:     #5f6b77;   /* Hinweise, Platzhalter (AA auch auf --panel-2) */
  --heading:       #1e3a5f;   /* Ueberschriften auf hellem Grund */

  /* Linien */
  --line:          #e2e7ec;
  --line-strong:   #cbd3db;

  /* Marke */
  --brand:         #2563eb;
  --brand-ink:     #1d4ed8;
  --brand-soft:    #e4ecff;
  --brand-wash:    #eff6ff;   /* sehr helle Blauflaeche fuer Abschnitte */
  --on-brand:      #ffffff;   /* Text auf Markenflaeche */
  --brand-surface: #2563eb;   /* Fuellung von Buttons – traegt weissen Text */
  --brand-surface-hover:#1d4ed8;

  /* Dunkle Abschnitte (Hero-Baender, Footer) */
  --hero-1:        #10233a;
  --hero-2:        #1c3d63;
  --on-hero:       #eaf1ff;
  --on-hero-soft:  #a7bfe0;
  --on-hero-accent:#93c5fd;
  --on-hero-veil:  rgba(255,255,255,.07);

  /* Semantik */
  --good:          #14753a;   /* gruener Text auf hellem Grund (AA auf --panel-2) */
  --good-hover:    #0f6b32;
  --good-surface:  #15803d;   /* gruene Fuellung – traegt weissen Text */
  --good-surface-hover:#0f6b32;
  --good-soft:     #dcfce7;
  --good-line:     #86efac;
  --good-ink:      #166534;
  --amber:         #b45309;
  --amber-soft:    #fef3c7;
  --danger:        #dc2626;
  --danger-soft:   #fee2e2;
  --danger-line:   #fca5a5;

  /* Zweitakzent (Support / HelpDesk) */
  --accent:        #4f46e5;
  --accent-ink:    #4338ca;
  --accent-soft:   #f5f3ff;
  --accent-surface:#4f46e5;   /* Support-Button – traegt weissen Text */
  --accent-surface-hover:#4338ca;

  /* Bauteile */
  --nav-bg:        rgba(255,255,255,.97);
  --overlay:       rgba(0,0,0,.5);
  --overlay-strong:rgba(15,23,42,.9);
  --shadow:        0 1px 2px rgba(20,30,50,.05), 0 14px 34px -20px rgba(20,30,50,.35);
  --shadow-brand:  0 4px 24px rgba(37,99,235,.12);
  --shadow-lift:   0 24px 72px rgba(26,79,139,.28), 0 4px 16px rgba(0,0,0,.12);
  --shadow-lift-2: 0 20px 60px rgba(26,79,139,.2), 0 4px 12px rgba(0,0,0,.08);
  --radius:        16px;

  /* Abstandsskala – die Werte sind der bisherige Ist-Stand, nur benannt */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 80px;

  /* Schriftskala */
  --font-hero: 3rem;   --font-h2: 2rem;    --font-h3: 1.4rem;
  --font-lead: 1.15rem;--font-body: 1rem;  --font-sm: .9rem;  --font-xs: .78rem;

  /* ── Alte Namen der Kernseiten – zeigen auf die Tokens oben ──────────── */
  --blau:   var(--brand);
  --blau2:  var(--brand-ink);
  --blau3:  var(--brand-soft);
  --dunkel: var(--heading);
  --text:   var(--ink);
  --grau:   var(--ink-soft);
  --hell:   var(--panel-2);
  --weiss:  var(--panel);
  --rand:   var(--line);
  --gruen:  var(--good);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0c1016;
    --panel:         #151a21;
    --panel-2:       #11151b;

    --ink:           #eef2f6;
    --ink-soft:      #b0bac4;
    --ink-faint:     #7f8a95;
    --heading:       #eef2f6;

    --line:          #242b34;
    --line-strong:   #343d48;

    --brand:         #5b8bff;
    --brand-ink:     #7aa2ff;
    --brand-soft:    #182642;
    --brand-wash:    #111a2b;
    --on-brand:      #ffffff;
    --brand-surface: #2f5fd0;
    --brand-surface-hover:#2b57bd;

    --hero-1:        #0a1626;
    --hero-2:        #102a47;
    --on-hero:       #eaf1ff;
    --on-hero-soft:  #9db6d8;
    --on-hero-accent:#9dc0ff;
    --on-hero-veil:  rgba(255,255,255,.06);

    --good:          #57cc85;
    --good-hover:    #3fae70;
    --good-surface:  #15803d;
    --good-surface-hover:#0f6b32;
    --good-soft:     #12241a;
    --good-line:     #2b5a3d;
    --good-ink:      #8ee0ac;
    --amber:         #e6a94e;
    --amber-soft:    #2c2110;
    --danger:        #ff8079;
    --danger-soft:   #2a1210;
    --danger-line:   #5c2a26;

    --accent:        #8b83ff;
    --accent-ink:    #a49dff;
    --accent-soft:   #1a1730;
    --accent-surface:#4f46e5;
    --accent-surface-hover:#4338ca;

    --nav-bg:        rgba(21,26,33,.97);
    --overlay:       rgba(0,0,0,.66);
    --overlay-strong:rgba(3,6,12,.92);
    --shadow:        0 1px 2px rgba(0,0,0,.5), 0 16px 40px -22px rgba(0,0,0,.85);
    --shadow-brand:  0 4px 24px rgba(0,0,0,.55);
    --shadow-lift:   0 24px 72px rgba(0,0,0,.7), 0 4px 16px rgba(0,0,0,.5);
    --shadow-lift-2: 0 20px 60px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.45);
  }
}

:root[data-theme="dark"] {
  --bg:            #0c1016;
  --panel:         #151a21;
  --panel-2:       #11151b;

  --ink:           #eef2f6;
  --ink-soft:      #b0bac4;
  --ink-faint:     #7f8a95;
  --heading:       #eef2f6;

  --line:          #242b34;
  --line-strong:   #343d48;

  --brand:         #5b8bff;
  --brand-ink:     #7aa2ff;
  --brand-soft:    #182642;
  --brand-wash:    #111a2b;
  --on-brand:      #ffffff;
  --brand-surface: #2f5fd0;
  --brand-surface-hover:#2b57bd;

  --hero-1:        #0a1626;
  --hero-2:        #102a47;
  --on-hero:       #eaf1ff;
  --on-hero-soft:  #9db6d8;
  --on-hero-accent:#9dc0ff;
  --on-hero-veil:  rgba(255,255,255,.06);

  --good:          #57cc85;
  --good-hover:    #3fae70;
  --good-surface:  #15803d;
  --good-surface-hover:#0f6b32;
  --good-soft:     #12241a;
  --good-line:     #2b5a3d;
  --good-ink:      #8ee0ac;
  --amber:         #e6a94e;
  --amber-soft:    #2c2110;
  --danger:        #ff8079;
  --danger-soft:   #2a1210;
  --danger-line:   #5c2a26;

  --accent:        #8b83ff;
  --accent-ink:    #a49dff;
  --accent-soft:   #1a1730;
  --accent-surface:#4f46e5;
  --accent-surface-hover:#4338ca;

  --nav-bg:        rgba(21,26,33,.97);
  --overlay:       rgba(0,0,0,.66);
  --overlay-strong:rgba(3,6,12,.92);
  --shadow:        0 1px 2px rgba(0,0,0,.5), 0 16px 40px -22px rgba(0,0,0,.85);
  --shadow-brand:  0 4px 24px rgba(0,0,0,.55);
  --shadow-lift:   0 24px 72px rgba(0,0,0,.7), 0 4px 16px rgba(0,0,0,.5);
  --shadow-lift-2: 0 20px 60px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.45);
}

/* Bilder und Screenshots im Dunkelmodus nicht grell strahlen lassen */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero-screenshot-frame img,
  :root:not([data-theme="light"]) .ss-frame img { filter: brightness(.92) contrast(1.02); }
}
:root[data-theme="dark"] .hero-screenshot-frame img,
:root[data-theme="dark"] .ss-frame img { filter: brightness(.92) contrast(1.02); }