/**
 * Design Tokens - Kloek-huis Verblijf B.V.
 * Enige bron van waarheid voor kleuren, typografie, spacing, radii, schaduwen
 */

:root {
    /* ========================================
       BRAND KLEUREN
       ======================================== */
    --brand-green: #7BC142;
    --brand-orange: #FF8C42;
    --brand-blue: #2E86AB;
    --brand-pink: #E91E63;
    --brand-yellow: #FFD93D;
    
    /* Brand gradient (groen → oranje) */
    --brand-gradient: linear-gradient(90deg, var(--brand-green), var(--brand-orange));
    
    /* ========================================
       ACHTERGROND KLEUREN
       ======================================== */
    --bg-surface: #FFFFFF;
    --bg-sand: #FFF9F5;        /* warm-beige - voor secties */
    --bg-blush: #FFE4D1;       /* soft-peach - voor accenten */
    --bg-cream: #FFF8F0;       /* warm-cream - voor subtiele achtergronden */
    
    /* ========================================
       TEKST KLEUREN
       ======================================== */
    --text-primary: #1b1b1b;   /* Donker voor WCAG AA contrast */
    --text-secondary: rgba(27, 27, 27, 0.72);
    --text-inverse: #FFFFFF;
    
    /* Legacy support (behouden voor backward compatibility) */
    --text-dark: #2D3748;
    --text-light: #4A5568;
    
    /* ========================================
       OVERLAYS (voor foto's en leesbaarheid)
       ======================================== */
    --overlay-dark: rgba(0, 0, 0, 0.40);      /* WCAG AA contrast op foto's */
    --overlay-warm: rgba(0, 0, 0, 0.18);      /* Subtiele overlay */
    --overlay-light: rgba(255, 255, 255, 0.2); /* Voor nav hover */
    
    /* ========================================
       GRIJS SCHAAL (utility)
       ======================================== */
    --gray-100: #F7FAFC;
    --gray-200: #EDF2F7;
    --gray-300: #E2E8F0;
    --gray-400: #CBD5E0;
    --gray-500: #A0AEC0;
    --gray-600: #718096;
    --gray-700: #4A5568;
    --gray-800: #2D3748;
    --gray-900: #1A202C;
    
    /* ========================================
       TYPOGRAFIE
       ======================================== */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    /* Font sizes (herleid uit bestaande, geharmoniseerd) */
    --font-size-xs: 14px;      /* 0.875rem */
    --font-size-sm: 16px;      /* 1rem */
    --font-size-md: 18px;      /* 1.125rem */
    --font-size-lg: 22px;      /* 1.375rem */
    --font-size-xl: 28px;      /* 1.75rem */
    --font-size-2xl: 36px;     /* 2.25rem */
    
    /* Line heights */
    --line-height: 1.5;
    --line-height-tight: 1.25;
    --line-height-relaxed: 1.625;
    
    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ========================================
       SPACING (8-punt systeem)
       ======================================== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-16: 64px;
    
    /* Legacy spacing (behouden voor backward compatibility) */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    --space-3xl: 4rem;     /* 64px */
    
    /* ========================================
       BORDER RADIUS
       ======================================== */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 28px;     /* Voor pill/hart vormen */
    
    /* ========================================
       SCHADUWEN
       ======================================== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.10);
    
    /* Legacy shadows (behouden voor backward compatibility) */
    --shadow-lg: 0 10px 15px -3px rgba(255, 140, 66, 0.1), 0 4px 6px -2px rgba(255, 140, 66, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(255, 140, 66, 0.1), 0 10px 10px -5px rgba(255, 140, 66, 0.04);
    
    /* ========================================
       BREAKPOINTS (voor media queries)
       ======================================== */
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-wide: 1280px;
    
    /* ========================================
       CONTAINER
       ======================================== */
    --container-max-width: 1200px;
    --container-padding: var(--space-4);      /* 16px */
    --container-padding-mobile: var(--space-3); /* 12px */
    
    /* ========================================
       SECTION PADDING
       ======================================== */
    --section-padding-y: var(--space-12);     /* 48px desktop */
    --section-padding-y-mobile: var(--space-6); /* 24px mobiel */
    
    /* ========================================
       TOUCH TARGETS (toegankelijkheid)
       ======================================== */
    --touch-target-min: 44px;
}