/**
 * Rake Vragen Dashboard - Design Tokens
 * =====================================
 * 
 * Dit bestand bevat ALLE design tokens voor het dashboard.
 * Wijzig kleuren, spacing, fonts ALLEEN hier.
 * 
 * NAMING CONVENTION:
 * - Kleuren: --color-{naam}
 * - Spacing: --space-{nummer} (4px grid)
 * - Radius: --radius-{grootte}
 * - Shadows: --shadow-{grootte}
 * 
 * @version 1.0.0
 * @date 23 december 2024
 */

:root {
    /* =========================================================================
       KLEUREN - Hoofdkleuren
       ========================================================================= */
    
    /* Blauw - Navigatie, headers, tabs, focus, accenten */
    --color-primary: #2BA4B4;
    --color-primary-light: #75C9DB;
    --color-primary-hover: #238a97;
    --color-primary-10: rgba(43, 164, 180, 0.1);
    --color-primary-15: rgba(43, 164, 180, 0.15);
    --color-primary-20: rgba(43, 164, 180, 0.2);
    --color-primary-30: rgba(43, 164, 180, 0.3);
    
    /* Rood - ALLEEN destructief, errors, urgentie */
    --color-danger: #E8000F;
    --color-danger-hover: #C7000D;
    --color-danger-light: #FFEBEE;
    --color-danger-border: #EF9A9A;
    --color-danger-text: #C62828;
    --color-danger-10: rgba(232, 0, 15, 0.1);
    --color-danger-15: rgba(232, 0, 15, 0.15);
    
    /* =========================================================================
       KLEUREN - Steunkleuren (buttons, badges, accenten)
       ========================================================================= */
    
    /* Groen - Bevestigen, succes, primaire actie */
    --color-success: #00B74F;
    --color-success-hover: #009940;
    --color-success-light: #E8F5E9;
    --color-success-border: #A5D6A7;
    --color-success-text: #1B5E20;
    
    /* Oranje - Actie, volgende stap, waarschuwing */
    --color-warning: #ED8B00;
    --color-warning-light: #FFF3E0;
    --color-warning-border: #FFCC80;
    --color-warning-text: #E65100;
    
    /* Paars - Creatief, categorie */
    --color-purple: #B884CB;
    --color-purple-light: #F3E5F5;
    --color-purple-text: #7B1FA2;
    
    /* Geel - Highlight, waarschuwing */
    --color-yellow: #F7E31F;
    --color-yellow-light: #FFFDE7;
    
    /* Roze - Zacht, verbindend */
    --color-pink: #E4A9BB;
    --color-pink-light: #FCE4EC;
    
    /* Bruin - Donkere tekst op licht */
    --color-brown: #5E0F3F;
    
    /* Info - Blauw voor informatieve meldingen */
    --color-info-light: #E3F2FD;
    --color-info-border: #90CAF9;
    --color-info-text: #1565C0;
    
    /* =========================================================================
       KLEUREN - Neutraal
       ========================================================================= */
    
    --color-white: #FFFFFF;
    --color-bg: #F8F7F4;
    --color-bg-alt: #FAFAFA;
    --color-border: #E5E5E5;
    --color-muted: #666666;
    --color-text: #1A1A1A;
    --color-text-light: #999999;
    
    /* =========================================================================
       TYPOGRAFIE
       ========================================================================= */
    
    /* Font families */
    --font-heading: 'Rockwell', Georgia, serif;
    --font-body: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Monaco', 'Menlo', 'Consolas', monospace;
    
    /* Font sizes */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.75rem;    /* 28px */
    --text-4xl: 2rem;       /* 32px */
    
    /* 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.7;
    
    /* =========================================================================
       SPACING - 4px Grid
       ========================================================================= */
    
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    
    /* =========================================================================
       BORDER RADIUS
       ========================================================================= */
    
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-base: 8px;      /* Buttons, inputs */
    --radius-lg: 12px;       /* Cards */
    --radius-xl: 16px;       /* Grote blokken */
    --radius-2xl: 24px;      /* Heel grote blokken */
    --radius-full: 9999px;   /* Pills, badges */
    
    /* =========================================================================
       SHADOWS
       ========================================================================= */
    
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.16);
    
    /* Focus shadow */
    --shadow-focus: 0 0 0 3px var(--color-primary-15);
    --shadow-focus-danger: 0 0 0 3px var(--color-danger-10);
    --shadow-focus-success: 0 0 0 3px rgba(0, 183, 79, 0.3);
    
    /* =========================================================================
       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-modal-backdrop: 900;
    --z-modal: 1000;
    --z-tooltip: 1100;
    
    /* =========================================================================
       LAYOUT
       ========================================================================= */
    
    --max-width: 1400px;
    --sidebar-width: 220px;
    --sidebar-width-lg: 280px;
    --header-height: 64px;
}