/**
 * Parelwit Theme - CSS Variabelen
 * Centraal beheer van kleuren, spacing, fonts, etc.
 */

:root {
    /* === KLEUREN === */
    
    /* Primaire kleuren */
    --color-primary: #7A6047;
    --color-primary-light: #9A7D5F;
    --color-primary-dark: #40291B;
    
    /* Secondaire kleuren */
    --color-secondary: #F5F1ED;
    --color-secondary-dark: #E5DDD5;
    
    /* Neutrale kleuren */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-neutral-100: #F7F4F1;
    --color-neutral-200: #E9E2DB;
    --color-neutral-300: #D7CDC2;
    --color-neutral-400: #B8AA9A;
    --color-neutral-500: #9A8A79;
    --color-neutral-600: #7A6958;
    --color-neutral-700: #5F5145;
    --color-neutral-800: #473C33;
    --color-neutral-900: #2F2822;
    
    /* Accent kleuren */
    --color-accent: #D4AF37; /* Goud accent */
    --color-success: #10B981;
    --color-error: #EF4444;
    --color-warning: #F59E0B;
    --color-info: #3B82F6;
    
    
    /* === SPACING / PADDING === */
    
    /* Section padding (verticaal) */
    --section-padding-mobile: 60px;
    --section-padding-desktop: 120px;
    --section-padding-large: 150px;
    
    /* Section padding (horizontaal) */
    --section-padding-x: 24px;
    
    /* Content spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 96px;
    
    /* Container max-width */
    --container-width: 1440px;
    --container-narrow: 1200px;
    --container-content: 800px;
    
    
    /* === TYPOGRAFIE === */
    
    /* Font families */
    --font-primary: 'Quicksand', sans-serif;           /* Koppen */
    --font-secondary: 'Manrope', sans-serif;           /* Buttons en labels */
    --font-body: 'Manrope', sans-serif;                /* Body tekst */
    
    /* Font sizes */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 30px;
    --font-size-4xl: 36px;
    --font-size-5xl: 48px;
    --font-size-6xl: 60px;
    --font-size-7xl: 72px;
    
    /* Font weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Line heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;
    
    
    /* === BORDERS & RADIUS === */
    
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 9999px;
    
    --border-width: 1px;
    --border-width-thick: 2px;
    
    
    /* === SHADOWS === */
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    
    /* === TRANSITIONS === */
    
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    
    
    /* === Z-INDEX === */
    
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}