/* ================================================================
   Familienplaner Design System
   Modern Dark Dashboard mit warmem Akzent
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* ---- Hauptfarben ---- */
    --accent:             #6C9CFF;
    --accent-hover:       #8BB3FF;
    --accent-muted:       rgba(108, 156, 255, 0.15);
    --accent-glow:        rgba(108, 156, 255, 0.25);

    --green:              #5EE09C;
    --green-muted:        rgba(94, 224, 156, 0.15);
    --orange:             #FFB347;
    --orange-muted:       rgba(255, 179, 71, 0.15);
    --red:                #FF6B6B;
    --red-muted:          rgba(255, 107, 107, 0.15);
    --purple:             #B48EFF;
    --purple-muted:       rgba(180, 142, 255, 0.15);
    --cyan:               #4DD9E8;
    --cyan-muted:         rgba(77, 217, 232, 0.15);
    --pink:               #FF8EC4;
    --yellow:             #FFD93D;

    /* ---- Hintergruende ---- */
    --bg-base:            #0B0F19;
    --bg-surface:         #111827;
    --bg-card:            #1A2236;
    --bg-card-hover:      #1F2A42;
    --bg-elevated:        #243050;
    --bg-input:           #0D1321;
    --bg-sidebar:         #0D1525;

    /* ---- Text ---- */
    --text-primary:       #F0F4FC;
    --text-secondary:     #8B95A8;
    --text-muted:         #5A6478;
    --text-inverse:       #0B0F19;

    /* ---- Borders ---- */
    --border:             rgba(255, 255, 255, 0.06);
    --border-strong:      rgba(255, 255, 255, 0.12);
    --border-accent:      rgba(108, 156, 255, 0.3);

    /* ---- Typografie ---- */
    --font-sans:          'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:          'JetBrains Mono', 'Fira Code', monospace;

    --text-xs:   0.7rem;
    --text-sm:   0.8125rem;
    --text-base: 0.9375rem;
    --text-lg:   1.0625rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;

    /* ---- Spacing ---- */
    --sp-1:  0.25rem;
    --sp-2:  0.5rem;
    --sp-3:  0.75rem;
    --sp-4:  1rem;
    --sp-5:  1.25rem;
    --sp-6:  1.5rem;
    --sp-8:  2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;

    /* ---- Radien ---- */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-full: 9999px;

    /* ---- Schatten ---- */
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md:   0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg:   0 8px 30px rgba(0,0,0,0.5);
    --shadow-xl:   0 16px 50px rgba(0,0,0,0.6);
    --shadow-glow: 0 0 20px var(--accent-glow);

    /* ---- Transitions ---- */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:    150ms;
    --dur-normal:  250ms;
    --dur-slow:    400ms;

    /* ---- Layout ---- */
    --sidebar-w:   260px;
    --sidebar-w-collapsed: 72px;
    --topbar-h:    60px;
}

/* ---- Basis ---- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-base);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    overflow-x: hidden;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

::selection {
    background: var(--accent-muted);
    color: var(--text-primary);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ---- Glassmorphism Utility ---- */
.glass {
    background: rgba(26, 34, 54, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
}

/* ================================================================
   LIGHT MODE (manual toggle via data-theme="light")
   ================================================================ */
[data-theme="light"] {
        /* ---- Hauptfarben (etwas kraeftiger fuer Light) ---- */
        --accent:             #4A7FE5;
        --accent-hover:       #3A6DD4;
        --accent-muted:       rgba(74, 127, 229, 0.12);
        --accent-glow:        rgba(74, 127, 229, 0.15);

        --green:              #22C55E;
        --green-muted:        rgba(34, 197, 94, 0.12);
        --orange:             #F59E0B;
        --orange-muted:       rgba(245, 158, 11, 0.12);
        --red:                #EF4444;
        --red-muted:          rgba(239, 68, 68, 0.12);
        --purple:             #8B5CF6;
        --purple-muted:       rgba(139, 92, 246, 0.12);
        --cyan:               #06B6D4;
        --cyan-muted:         rgba(6, 182, 212, 0.12);
        --pink:               #EC4899;
        --yellow:             #EAB308;

        /* ---- Hintergruende ---- */
        --bg-base:            #F5F7FA;
        --bg-surface:         #FFFFFF;
        --bg-card:            #FFFFFF;
        --bg-card-hover:      #F8F9FB;
        --bg-elevated:        #F0F2F5;
        --bg-input:           #F0F2F5;
        --bg-sidebar:         #FFFFFF;

        /* ---- Text ---- */
        --text-primary:       #1A1D23;
        --text-secondary:     #5F6B7A;
        --text-muted:         #9CA3AF;
        --text-inverse:       #FFFFFF;

        /* ---- Borders ---- */
        --border:             rgba(0, 0, 0, 0.08);
        --border-strong:      rgba(0, 0, 0, 0.15);
        --border-accent:      rgba(74, 127, 229, 0.3);

        /* ---- Schatten ---- */
        --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
        --shadow-md:   0 4px 12px rgba(0,0,0,0.08);
        --shadow-lg:   0 8px 30px rgba(0,0,0,0.1);
        --shadow-xl:   0 16px 50px rgba(0,0,0,0.12);
        --shadow-glow: 0 0 20px var(--accent-glow);
    }

/* Scrollbar light */
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

/* Glass light */
[data-theme="light"] .glass {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--border);
}

[data-theme="light"] ::selection {
    background: var(--accent-muted);
    color: var(--text-primary);
}