/* ==========================================================================
   Theme System – CSS Custom Properties
   Dark Mode = Default (:root), Light Mode = body.light-mode
   ========================================================================== */

:root {
    /* ── Hintergründe ─────────────────────────────────────────────────── */
    --bg-body-overlay:      rgba(0, 0, 0, 0.6);
    --bg-header:            rgba(53, 53, 53, 0.2);
    --bg-footer:            transparent;
    --bg-surface:           rgba(42, 42, 42, 0.95);
    --bg-input:             rgb(49, 49, 49);
    --bg-input-focus:       rgb(35, 35, 35);
    --bg-hover:             rgb(62, 62, 62);
    --bg-hover-subtle:      rgba(172, 172, 172, 0.081);
    --bg-hover-icon:        rgba(200, 200, 200, 0.2);
    --bg-overlay:           rgba(0, 0, 0, 0.5);
    --bg-phone:             black;
    --bg-phone-hover:       rgb(66, 66, 66);
    --bg-phone-active:      rgb(100, 100, 100);
    --bg-section:           rgba(0, 0, 0, 0.3);
    --bg-panel:             #1e1e1e;
    --bg-suggestions:       rgb(40, 40, 40);
    --bg-resize:            rgba(100, 100, 100, 0.3);
    --bg-resize-hover:      rgba(100, 100, 100, 0.5);
    --bg-subtle:            rgba(255, 255, 255, 0.08);
    --bg-subtle-hover:      rgba(255, 255, 255, 0.1);
    --bg-subtle-medium:     rgba(255, 255, 255, 0.15);
    --bg-subtle-strong:     rgba(255, 255, 255, 0.25);
    --bg-buddy-hover:       rgba(73, 73, 73, 0.5);
    --bg-modal:             rgba(0, 0, 0, 0.7);
    --bg-device-bar:        rgba(0, 0, 0, 0.7);
    --bg-unread:            rgba(59, 130, 246, 0.1);
    --bg-tooltip:           rgba(30, 30, 30, 0.95);
    --bg-tooltip-status:    rgba(35, 47, 66, 0.97);
    --border-tooltip-status: rgba(59, 130, 246, 0.45);
    --bg-bubble-tooltip:    rgba(50, 50, 50, 0.95);
    --bg-debug:             rgba(0, 0, 0, 0.3);
    --bg-input-alpha:       rgba(49, 49, 49, 0.4);
    --bg-input-hover:       rgba(49, 49, 49, 0.7);
    --bg-scrollbar-track:   rgba(49, 49, 49, 0.5);
    --bg-scrollbar-thumb:   rgba(100, 100, 100, 0.8);
    --bg-scrollbar-thumb-hover: rgba(150, 150, 150, 0.8);

    /* ── Text ─────────────────────────────────────────────────────────── */
    --text-primary:         rgb(195, 195, 195);
    --text-strong:          white;
    --text-secondary:       gray;
    --text-muted:           rgb(177, 177, 177);
    --text-link:            rgb(200, 200, 200);
    --text-placeholder:     rgba(255, 255, 255, 0.5);
    --text-label:           rgba(255, 255, 255, 0.7);
    --text-desc:            rgba(255, 255, 255, 0.6);
    --text-dim:             rgba(255, 255, 255, 0.4);
    --text-phone:           rgb(141, 141, 141);
    --text-phone-placeholder: rgb(66, 66, 66);
    --text-device:          #ccc;
    --text-device-item:     #e3e3e3;

    /* ── Rahmen ───────────────────────────────────────────────────────── */
    --border-subtle:        rgba(255, 255, 255, 0.08);
    --border-separator:     rgba(255, 255, 255, 0.15);
    --border-medium:        rgba(255, 255, 255, 0.2);
    --border-strong:        rgba(255, 255, 255, 0.3);
    --border-head-sep:      rgba(150, 150, 150, 0.5);
    --border-input:         rgb(195, 195, 195);
    --border-btn:           rgb(84, 84, 84);
    --border-btn-active:    rgb(184, 184, 184);
    --border-divider:       rgb(100, 100, 100);
    --border-line:          rgba(74, 74, 74, 0);
    --border-panel:         #333;
    --border-hover:         rgba(150, 150, 150, 0.6);
    --border-medium-alpha:  rgba(100, 100, 100, 0.5);

    /* ── Schatten ──────────────────────────────────────────────────────── */
    --shadow-sm:            0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow:               0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg:            0 4px 20px rgba(0, 0, 0, 0.5);

    /* ── Icons (Filter für SVG-Icons die weiß sind) ────────────────── */
    --icon-filter:          none;
    --icon-filter-dark:     invert(1);
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHT MODE
   ══════════════════════════════════════════════════════════════════════════ */

body.light-mode {
    /* ── Hintergründe ─────────────────────────────────────────────────── */
    --bg-body-overlay:      rgba(255, 255, 255, 0.82);
    --bg-header:            rgba(235, 235, 235, 0.4);
    --bg-footer:            rgba(235, 235, 235, 0.4);
    --bg-surface:           rgba(255, 255, 255, 0.95);
    --bg-input:             rgb(238, 238, 238);
    --bg-input-focus:       rgb(245, 245, 245);
    --bg-hover:             rgb(232, 232, 232);
    --bg-hover-subtle:      rgba(0, 0, 0, 0.04);
    --bg-hover-icon:        rgba(0, 0, 0, 0.08);
    --bg-overlay:           rgba(0, 0, 0, 0.3);
    --bg-phone:             rgb(240, 240, 240);
    --bg-phone-hover:       rgb(215, 215, 215);
    --bg-phone-active:      rgb(195, 195, 195);
    --bg-section:           rgba(0, 0, 0, 0.04);
    --bg-panel:             #ffffff;
    --bg-suggestions:       rgb(250, 250, 250);
    --bg-resize:            rgba(0, 0, 0, 0.08);
    --bg-resize-hover:      rgba(0, 0, 0, 0.15);
    --bg-subtle:            rgba(0, 0, 0, 0.04);
    --bg-subtle-hover:      rgba(0, 0, 0, 0.06);
    --bg-subtle-medium:     rgba(0, 0, 0, 0.08);
    --bg-subtle-strong:     rgba(0, 0, 0, 0.12);
    --bg-buddy-hover:       rgba(0, 0, 0, 0.05);
    --bg-modal:             rgba(0, 0, 0, 0.4);
    --bg-device-bar:        rgba(235, 235, 235, 0.9);
    --bg-unread:            rgba(59, 130, 246, 0.08);
    --bg-tooltip:           rgba(255, 255, 255, 0.95);
    --bg-tooltip-status:    rgba(208, 228, 254, 0.97);
    --border-tooltip-status: rgba(59, 130, 246, 0.45);
    --bg-bubble-tooltip:    rgba(255, 255, 255, 0.95);
    --bg-debug:             rgba(0, 0, 0, 0.04);
    --bg-input-alpha:       rgba(230, 230, 230, 0.5);
    --bg-input-hover:       rgba(220, 220, 220, 0.7);
    --bg-scrollbar-track:   rgba(0, 0, 0, 0.05);
    --bg-scrollbar-thumb:   rgba(0, 0, 0, 0.15);
    --bg-scrollbar-thumb-hover: rgba(0, 0, 0, 0.25);

    /* ── Text ─────────────────────────────────────────────────────────── */
    --text-primary:         rgb(60, 60, 60);
    --text-strong:          rgb(20, 20, 20);
    --text-secondary:       rgb(120, 120, 120);
    --text-muted:           rgb(130, 130, 130);
    --text-link:            rgb(80, 80, 80);
    --text-placeholder:     rgba(0, 0, 0, 0.4);
    --text-label:           rgba(0, 0, 0, 0.6);
    --text-desc:            rgba(0, 0, 0, 0.5);
    --text-dim:             rgba(0, 0, 0, 0.3);
    --text-phone:           rgb(80, 80, 80);
    --text-phone-placeholder: rgb(180, 180, 180);
    --text-device:          rgb(80, 80, 80);
    --text-device-item:     rgb(40, 40, 40);

    /* ── Rahmen ───────────────────────────────────────────────────────── */
    --border-subtle:        rgba(0, 0, 0, 0.08);
    --border-separator:     rgba(0, 0, 0, 0.1);
    --border-medium:        rgba(0, 0, 0, 0.15);
    --border-strong:        rgba(0, 0, 0, 0.2);
    --border-head-sep:      rgba(0, 0, 0, 0.12);
    --border-input:         rgb(180, 180, 180);
    --border-btn:           rgb(200, 200, 200);
    --border-btn-active:    rgb(120, 120, 120);
    --border-divider:       rgb(210, 210, 210);
    --border-line:          rgba(200, 200, 200, 0);
    --border-panel:         #ddd;
    --border-hover:         rgba(0, 0, 0, 0.25);
    --border-medium-alpha:  rgba(0, 0, 0, 0.12);

    /* ── Schatten ──────────────────────────────────────────────────────── */
    --shadow-sm:            0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow:               0 4px 20px rgba(0, 0, 0, 0.12);
    --shadow-lg:            0 4px 20px rgba(0, 0, 0, 0.15);

    /* ── Icons (invertieren für dunkle SVG-Icons) ──────────────────── */
    --icon-filter:          invert(0.7);
    --icon-filter-dark:     none;
}

/* ══════════════════════════════════════════════════════════════════════════
   WEBSITE-ERWEITERUNG – zusätzliche Tokens für die antilo-Website
   (gleiche Logik: Dark = :root, Light = body.light-mode)
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --bg-page:              #0b0b0b;
    --bg-page-alt:          #121212;
    --bg-card:              rgba(42, 42, 42, 0.55);
    --bg-card-solid:        #1b1b1b;
    --bg-glass:             rgba(20, 20, 20, 0.6);
    --bg-photo-veil:        linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.85) 100%);
    --bg-device:            #0d0d0d;
    --bg-device-frame:      #2a2a2a;
    --bg-device-edge:       #3a3a3a;
    --bg-screen:            #101010;

    --accent:               #e53935;
    --accent-soft:          rgba(229, 57, 53, 0.15);
    --ok:                   #4CAF50;
    --ok-soft:              rgba(76, 175, 80, 0.25);
    --warn:                 orange;
    --warn-soft:            rgba(255, 165, 0, 0.25);
    --info:                 #1e88e5;
    --info-soft:            rgba(59, 130, 246, 0.2);
    --danger:               #e74c3c;
    --danger-soft:          rgba(255, 0, 0, 0.3);

    --text-on-photo:        #ffffff;
}

body.light-mode {
    --bg-page:              #f4f4f4;
    --bg-page-alt:          #ffffff;
    --bg-card:              rgba(255, 255, 255, 0.75);
    --bg-card-solid:        #ffffff;
    --bg-glass:             rgba(245, 245, 245, 0.7);
    --bg-photo-veil:        linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.7) 100%);
    --bg-device:            #1a1a1a;
    --bg-device-frame:      #d9d9d9;
    --bg-device-edge:       #bdbdbd;
    --bg-screen:            #f7f7f7;

    --accent-soft:          rgba(229, 57, 53, 0.1);
    --ok-soft:              rgba(76, 175, 80, 0.18);
    --warn-soft:            rgba(255, 165, 0, 0.2);
    --info-soft:            rgba(59, 130, 246, 0.12);
    --danger-soft:          rgba(255, 0, 0, 0.15);
}

/* ══════════════════════════════════════════════════════════════════════════
   ICON FILTER
   ══════════════════════════════════════════════════════════════════════════ */

.icon,
.ui_icon,
.head_icon {
    filter: var(--icon-filter);
}

.icon_keep {
    filter: none;
}