/* ============================================
   Design Tokens – Light & Dark Mode
   Systemfonts, keine externen Fonts (DSGVO)
   ============================================ */

:root {
    /* Typography – Systemfonts */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    --font-size-base: 15px;
    --font-size-sm: 13px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-xxl: 32px;
    --line-height: 1.6;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;

    /* ---- Light Mode (Default) ---- */
    --bg: #f5f6fa;
    --surface: #ffffff;
    --text: #1a1a2e;
    --text-secondary: #555770;
    --muted: #8e8ea0;
    --border: #e2e4ea;
    --border-light: #f0f1f5;

    --primary: #4f46e5;
    --primary-hover: #4338ca;
    --primary-light: #eef2ff;
    --primary-text: #ffffff;

    --success: #10b981;
    --success-light: #ecfdf5;
    --warning: #f59e0b;
    --warning-light: #fffbeb;
    --danger: #ef4444;
    --danger-light: #fef2f2;
    --info: #3b82f6;
    --info-light: #eff6ff;

    /* Sidebar */
    --sidebar-bg: #1a1a2e;
    --sidebar-text: #c4c4d4;
    --sidebar-text-active: #ffffff;
    --sidebar-hover: rgba(255, 255, 255, 0.08);
    --sidebar-active: rgba(79, 70, 229, 0.3);
    --sidebar-width: 260px;

    /* Topbar */
    --topbar-height: 60px;
    --topbar-bg: #ffffff;
    --topbar-border: #e2e4ea;
}

/* ---- Dark Mode ---- */
[data-theme="dark"] {
    --bg: #0f0f1a;
    --surface: #1a1a2e;
    --text: #e4e4ed;
    --text-secondary: #a0a0b8;
    --muted: #6b6b80;
    --border: #2a2a40;
    --border-light: #222238;

    --primary: #6366f1;
    --primary-hover: #818cf8;
    --primary-light: rgba(99, 102, 241, 0.15);
    --primary-text: #ffffff;

    --success: #34d399;
    --success-light: rgba(52, 211, 153, 0.15);
    --warning: #fbbf24;
    --warning-light: rgba(251, 191, 36, 0.15);
    --danger: #f87171;
    --danger-light: rgba(248, 113, 113, 0.15);
    --info: #60a5fa;
    --info-light: rgba(96, 165, 250, 0.15);

    --sidebar-bg: #12121f;
    --sidebar-text: #8e8ea0;
    --sidebar-text-active: #ffffff;
    --sidebar-hover: rgba(255, 255, 255, 0.05);
    --sidebar-active: rgba(99, 102, 241, 0.25);

    --topbar-bg: #1a1a2e;
    --topbar-border: #2a2a40;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
}