/*
 * ILTS Design-Tokens — CSS Custom Properties
 *
 * Zentrale Farbdefinitionen und Abstände für das gesamte ILTS.
 * Basiert auf dem ILTS-Design-Styleguide (Theme D: Anthrazit + Steel Blue).
 * Dark-Mode-First — Light-Mode über [data-theme="light"] Override.
 *
 * Diese Datei wird in ALLE Templates eingebunden:
 * Agent-Interface, Admin-Panel, Kundenportal, Installer, Fehlerseiten.
 */

/* =========================================================================
   Dark Mode (Standard)
   ========================================================================= */

:root {
    /* Hintergründe */
    --bg-base:       #111318;
    --bg-surface:    #181c24;
    --bg-elevated:   #1e2330;
    --bg-hover:      #212636;

    /* Rahmen und Trennlinien */
    --border:        #252b36;
    --border-light:  #2d3444;

    /* Akzentfarbe (Steel Blue) */
    --accent:        #4f9cf9;
    --accent-dim:    rgba(79, 156, 249, 0.10);
    --accent-dim2:   rgba(79, 156, 249, 0.06);

    /* Text */
    --text-primary:   #dde3ee;
    --text-secondary: #8892a4;
    --text-muted:     #4f5868;

    /* SLA-Statusfarben (identisch in Light und Dark) */
    --sla-ok:        #22c55e;
    --sla-warn:      #f59e0b;
    --sla-crit:      #ef4444;
    --sla-ok-dim:    rgba(34, 197,  94, 0.10);
    --sla-warn-dim:  rgba(245, 158,  11, 0.10);
    --sla-crit-dim:  rgba(239,  68,  68, 0.10);

    /* Kanalfarben */
    --channel-email:     #1a56db;
    --channel-whatsapp:  #25d366;
    --channel-facebook:  #1877f2;
    --channel-instagram: #e1306c;
    --channel-form:      #4f9cf9;
    --channel-phone:     #6366f1;

    /* Spacing-Skala (4px Basis) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;

    /* Typografie */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                   "Helvetica Neue", Arial, sans-serif;
    --font-mono:   "Cascadia Code", "Fira Code", "JetBrains Mono", Consolas, monospace;
}

/* =========================================================================
   Light Mode
   ========================================================================= */

[data-theme="light"] {
    --bg-base:       #f4f5f7;
    --bg-surface:    #ffffff;
    --bg-elevated:   #f0f2f5;
    --bg-hover:      #e8eaef;

    --border:        #dde1e7;
    --border-light:  #e8ecf0;

    --accent:        #1a70e0;
    --accent-dim:    rgba(26, 112, 224, 0.10);
    --accent-dim2:   rgba(26, 112, 224, 0.06);

    --text-primary:   #1a1d23;
    --text-secondary: #5a6272;
    --text-muted:     #9aa0ad;
}