/* ============================================================
   FaWoWa - variables.css
   CSS Custom Properties (Design Tokens)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Roboto:wght@400;500;600&display=swap');

:root {
    /* Kleurenpalet */
    --primary:      #27AE60;     /* Eco Groen */
    --primary-dark: #219150;
    --secondary:    #E67E22;     /* Signaal Oranje */
    --secondary-dark: #d06a15;
    --dark:         #1A202C;     /* Donker Charcoal */
    --dark-2:       #2D3748;     /* Iets lichter voor depth */
    --light:        #F8FAFC;
    --white:        #FFFFFF;
    --text:         #334155;
    --text-muted:   #64748b;
    --text-light:   #94a3b8;

    /* Header */
    --header-bg:   #1A202C;
    --header-text: #FFFFFF;
    --header-height: 90px;
    --header-height-mobile: 70px;

    /* Effecten */
    --shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 25px 50px -12px rgba(0,0,0,0.25);
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 16px;
    --transition: 0.3s ease;
}