/* ============================================
   KimWeb Design Token System
   Zentrale CSS-Variablen fuer alle Farben und
   Design-Werte. Dark Mode spaeter ueber
   :root[data-theme="dark"] { ... } umstellbar.
   ============================================ */
:root {
    /* ---- Brand / Primary ---- */
    --color-primary: #2e64a0;
    --color-primary-dark: #1e4685;
    --color-primary-hover: rgba(46, 100, 160, 0.9);
    --color-primary-transparent: rgba(46, 100, 160, 0.7);
    --color-primary-bg: rgba(46, 100, 160, 0.08);
    --color-primary-bg-light: #f0f6ff;
    --color-primary-bg-hover: #e0eeff;
    --color-primary-border: #a0c4e8;

    /* ---- Backgrounds ---- */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;

    /* ---- Text ---- */
    --text-primary: #1f2937;
    --text-secondary: #374151;
    --text-muted: #6b7280;
    --text-placeholder: #9ca3af;

    /* ---- Borders ---- */
    --border-color: #e5e7eb;
    --border-color-dark: #d1d5db;
    --border-color-light: #f0f0f0;

    /* ---- Status: Success ---- */
    --color-success: #198754;
    --color-success-text: #155724;
    --color-success-bg: #d4edda;
    --color-success-bg-end: #c3e6cb;
    --color-success-border: #a3d9a5;

    /* ---- Status: Danger ---- */
    --color-danger: #dc2626;
    --color-danger-dark: #b91c1c;
    --color-danger-bg: #fef2f2;
    --color-danger-border: #fca5a5;
    --color-danger-border-hover: #f87171;

    /* ---- Status: Warning ---- */
    --color-warning: #f59e0b;
    --color-warning-dark: #b45309;
    --color-warning-bg: #fff3cd;
    --color-warning-text: #664d03;
    --color-warning-icon: #d4840a;
    --color-warning-star: #ffc107;
    --color-warning-star-hover: #ffca2c;

    /* ---- Status: Info ---- */
    --color-info: #0dcaf0;
    --color-info-bg: #e7f3fe;
    --color-info-text: #084b8a;

    /* ---- Image Overlays (bewusst theme-unabhaengig: dunkler Schleier ueber Fotos) ---- */
    --overlay-bg: rgba(0, 0, 0, 0.55);
    --overlay-bg-strong: rgba(0, 0, 0, 0.7);
    --overlay-text: #ffffff;

    /* ---- Modal-/Dialog-Backdrops (theme-unabhaengig: dunkler Schleier hinter Modals) ---- */
    --modal-backdrop-bg: rgba(0, 0, 0, 0.4);
    --modal-backdrop-bg-strong: rgba(0, 0, 0, 0.5);
    --photo-overlay-bg: rgba(0, 0, 0, 0.6);
    --lightbox-bg: rgba(0, 0, 0, 0.92);

    /* ---- Translucent bg-primary (fuer Cards ueber Hintergrund-Bildern, Tab-Hover etc.) ---- */
    --bg-primary-translucent: rgba(255, 255, 255, 0.9);
    --bg-primary-translucent-50: rgba(255, 255, 255, 0.5);

    /* ---- Status-Toenungen fuer Badges/Overlays (immer farbig, theme-unabhaengig) ---- */
    --color-success-translucent: rgba(25, 135, 84, 0.85);
    --color-danger-translucent: rgba(220, 53, 69, 0.85);

    /* ---- Text auf primary/sidebar-color (immer weiss, beide Modi) ---- */
    --text-on-primary: #ffffff;

    /* ---- Links ---- */
    --color-link: #0071c1;

    /* ---- Focus ---- */
    --color-focus: #258cfb;

    /* ---- Input ---- */
    --input-bg: var(--bg-primary);
    --input-border: #ced4da;
    --input-text: #495057;

    /* ---- Shadows ---- */
    --shadow-color: rgba(0, 0, 0, 0.08);
    --shadow-color-lg: rgba(0, 0, 0, 0.15);
    --shadow-color-md: rgba(0, 0, 0, 0.18);
    --shadow-color-xl: rgba(0, 0, 0, 0.3);

    /* ---- Shadows mit KIM-Toenung (Focus-Ring, Highlight-Schatten) ---- */
    --color-primary-shadow: rgba(46, 100, 160, 0.15);
    --color-primary-shadow-lg: rgba(46, 100, 160, 0.3);

    /* ---- Chart-Palette: Objektart-Pie ---- */
    --chart-objektart-efh: #2e64a0;
    --chart-objektart-mfh: #4a90d9;
    --chart-objektart-eigentum: #1a3d6e;
    --chart-objektart-gemischt: #6cb4ee;
    --chart-objektart-gewerbe: #f59e0b;
    --chart-objektart-unbebaut: #8ba8c9;
    --chart-objektart-default: #9ca3af;

    /* ---- Stripe-Brand (Provider-Indicator in Vertraege) ---- */
    --color-stripe: #635bff;
    --color-stripe-bg: rgba(99, 91, 255, 0.1);

    /* ---- Misc ---- */
    --color-offline: #94a3b8;
    --color-code: #c02d76;

    /* ---- Sidebar (abgeleitet, User-konfigurierbar) ---- */
    --sidebar-color: var(--color-primary);
    --sidebar-transparent: var(--color-primary-transparent);
    --sidebar-hover: var(--color-primary-hover);
    --sidebar-bg: var(--bg-primary);
    --sidebar-text: var(--text-secondary);
    --sidebar-text-muted: var(--text-placeholder);
    --sidebar-border: var(--border-color);
    --sidebar-active-bg: var(--color-primary-bg);
    --sidebar-active-text: var(--sidebar-color);
    --sidebar-hover-bg: var(--bg-secondary);

    /* ---- Cards & Layout ---- */
    --card-border: var(--border-color);
    --card-radius: 8px;
    --dialog-radius: 8px;
    --btn-radius: 6px;
}