/* BouwKostenPro v7.0 — Design Tokens */
:root {
    /* Dark theme (default) */
    --bg: #0A1018;
    --sidebar: #0F1923;
    --card: #111B27;
    --card-hover: #162231;
    --surface: #0D1520;
    --border: #1A2A3C;
    --border2: #243448;
    --accent: #22C55E;
    --accent-dark: #16A34A;
    --accent-glow: rgba(34,197,94,0.12);
    --red: #EF4444;
    --red-glow: rgba(239,68,68,0.12);
    --warn: #F59E0B;
    --warn-glow: rgba(245,158,11,0.12);
    --blue: #3B82F6;
    --blue-glow: rgba(59,130,246,0.12);
    --pink: #EC4899;
    --pink-glow: rgba(236,72,153,0.12);
    --cyan: #06B6D4;
    --purple: #8B5CF6;
    --text1: #F1F5F9;
    --text2: #94A3B8;
    --text3: #4B6380;
    --text4: #2A3F55;

    /* Radius */
    --r: 12px;
    --r-sm: 8px;
    --r-lg: 16px;
    --r-pill: 999px;

    /* Font */
    --font: 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
    --shadow-lg: 0 12px 48px rgba(0,0,0,0.4);
    --shadow-modal: 0 24px 80px rgba(0,0,0,0.5);

    /* Transitions */
    --t-fast: 0.15s ease;
    --t-normal: 0.25s ease;
    --t-slow: 0.4s ease;

    /* Z-indexes */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 500;
    --z-modal: 1000;
    --z-toast: 2000;

    /* Spacing */
    --gap: 10px;
    --gap-sm: 6px;
    --gap-lg: 16px;
    --pad: 14px;
    --pad-sm: 8px;
    --pad-lg: 20px;

    /* Category colors */
    --cat-materiaal: #22C55E;
    --cat-arbeid: #3B82F6;
    --cat-vergunningen: #8B5CF6;
    --cat-installatie: #F59E0B;
    --cat-afwerking: #EC4899;
    --cat-tuin: #14B8A6;
    --cat-keuken: #F97316;
    --cat-badkamer: #06B6D4;
    --cat-dak: #EF4444;
    --cat-overig: #64748B;

    /* Sidebar */
    --sidebar-w: 200px;
    --sidebar-collapsed: 52px;
    --header-h: 48px;
    --mobile-nav-h: 56px;

    /* Shorthand aliases (used by components.css) */
    --ac: var(--accent);
    --ac-d: var(--accent-dark);
    --ac-g: var(--accent-glow);
    --brd: var(--border);
    --brd2: var(--border2);
    --card-h: var(--card-hover);
    --r-s: var(--r-sm);
    --r-l: var(--r-lg);
    --t1: var(--text1);
    --t2: var(--text2);
    --t3: var(--text3);
    --t4: var(--text4);
    --shadow: var(--shadow-md);
}

/* Light theme */
body.light {
    --bg: #F8FAFC;
    --sidebar: #FFFFFF;
    --card: #FFFFFF;
    --card-hover: #F1F5F9;
    --surface: #F1F5F9;
    --border: #E2E8F0;
    --border2: #CBD5E1;
    --accent: #16A34A;
    --accent-dark: #15803D;
    --accent-glow: rgba(22,163,74,0.08);
    --red: #DC2626;
    --warn: #D97706;
    --blue: #2563EB;
    --pink: #DB2777;
    --cyan: #0891B2;
    --purple: #7C3AED;
    --text1: #0F172A;
    --text2: #475569;
    --text3: #94A3B8;
    --text4: #CBD5E1;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 12px 48px rgba(0,0,0,0.12);
    --shadow-modal: 0 24px 80px rgba(0,0,0,0.15);

    /* Shorthand aliases */
    --ac: var(--accent);
    --ac-d: var(--accent-dark);
    --ac-g: var(--accent-glow);
    --brd: var(--border);
    --brd2: var(--border2);
    --card-h: var(--card-hover);
    --t1: var(--text1);
    --t2: var(--text2);
    --t3: var(--text3);
    --t4: var(--text4);
    --shadow: var(--shadow-md);
}