/**
 * Moving Systems Dashboard - CSS Variables
 * 
 * Rake Vragen Huisstijl
 * Alle kleuren, spacing, fonts en andere design tokens.
 */

:root {
    /* =========================================================
       KLEUREN - HOOFDKLEUREN
       ========================================================= */
    
    /* Blauw Donker - Navigatie, headers, tabs, focus, accenten */
    --color-primary: #2BA4B4;
    --color-primary-rgb: 43, 164, 180;
    
    /* Blauw Licht - Secundaire achtergronden, hover, cards */
    --color-primary-light: #75C9DB;
    --color-primary-light-rgb: 117, 201, 219;
    
    /* Rood - ALLEEN destructief, errors, urgentie */
    --color-danger: #E8000F;
    --color-danger-rgb: 232, 0, 15;

    /* =========================================================
       KLEUREN - STEUNKLEUREN (voor buttons, badges, accenten)
       ========================================================= */
    
    /* Groen - Bevestigen, succes, primaire actie buttons */
    --color-success: #00B74F;
    --color-success-rgb: 0, 183, 79;
    --color-success-hover: #009940;
    
    /* Oranje - Actie, volgende stap */
    --color-warning: #ED8B00;
    --color-warning-rgb: 237, 139, 0;
    --color-warning-hover: #D47A00;
    
    /* Paars - Creatief, categorie */
    --color-accent: #B884CB;
    --color-accent-rgb: 184, 132, 203;
    --color-accent-hover: #A070B8;
    
    /* Geel - Highlight, waarschuwing */
    --color-highlight: #F7E31F;
    --color-highlight-rgb: 247, 227, 31;
    --color-highlight-hover: #E0CC1B;
    
    /* Roze - Zacht, verbindend */
    --color-soft: #E4A9BB;
    --color-soft-rgb: 228, 169, 187;
    --color-soft-hover: #D899AD;
    
    /* Bruin - Donkere tekst op licht */
    --color-dark: #5E0F3F;
    --color-dark-rgb: 94, 15, 63;

    /* =========================================================
       KLEUREN - NEUTRAAL
       ========================================================= */
    
    --color-white: #FFFFFF;
    --color-off-white: #F8F7F4;
    --color-gray-light: #E5E5E5;
    --color-gray: #666666;
    --color-gray-dark: #444444;
    --color-black: #1A1A1A;

    /* =========================================================
       TYPOGRAFIE
       ========================================================= */
    
    /* Font families */
    --font-heading: 'Rockwell', Georgia, serif;
    --font-body: 'Roboto', Arial, sans-serif;
    
    /* Font sizes */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 32px;
    --text-4xl: 48px;
    
    /* Font weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* Line heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* =========================================================
       SPACING (4px grid)
       ========================================================= */
    
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* =========================================================
       BORDER RADIUS
       ========================================================= */
    
    --radius-xs: 6px;      /* Kleine elementen */
    --radius-sm: 8px;      /* Buttons, inputs, badges */
    --radius-md: 12px;     /* Cards, modals, dropdowns */
    --radius-lg: 16px;     /* Grote containers */
    --radius-xl: 24px;     /* Feature blokken, hero */
    --radius-full: 9999px; /* Volledig rond (pills, avatars) */

    /* =========================================================
       SCHADUWEN
       ========================================================= */
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.16);
    
    /* Focus ring */
    --shadow-focus: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);

    /* =========================================================
       TRANSITIONS
       ========================================================= */
    
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* =========================================================
       Z-INDEX
       ========================================================= */
    
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;
    --z-toast: 700;

    /* =========================================================
       LAYOUT
       ========================================================= */
    
    --sidebar-width: 260px;
    --header-height: 64px;
    --content-max-width: 1400px;
}

/* =========================================================
   DARK MODE (voor later)
   ========================================================= */

@media (prefers-color-scheme: dark) {
    :root.auto-dark {
        /* Kan later worden uitgebreid */
    }
}