/* GezinOpWeg - Playful Design System Variables */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&family=Baloo+2:wght@500;600;700;800&display=swap');

:root {
    /* ========== PLAYFUL COLOR PALETTE ========== */

    /* Nature Colors (Basis) */
    --color-forest: #1B4332;        /* Donkergroen - primaire tekst, headers */
    --color-forest-light: #2D6A4F;  /* Hover states */
    --color-leaf: #40916C;          /* Secondary tekst */
    --color-moss: #74C69D;          /* Positieve accenten, borders */
    --color-moss-light: #B7E4C7;    /* Lichte accenten */
    --color-mint: #D8F3DC;          /* Zeer lichte achtergronden */

    /* Vrolijke Accent Kleuren */
    --color-sunset: #FF6B6B;        /* Primaire CTA, belangrijke highlights */
    --color-sunset-light: #FF8787;  /* Gradient eindpunt */
    --color-peach: #FFC09F;         /* Warme accenten */
    --color-sunshine: #FFE66D;      /* Badges, speciale highlights */
    --color-sky: #7EC8E3;           /* Lucht, water elementen */
    --color-sky-light: #AED9E0;     /* Lichte achtergronden */

    /* Neutrale Kleuren */
    --color-cream: #FFF9F0;         /* Pagina achtergrond */
    --color-sand: #F5E6D3;          /* Borders, dividers */
    --color-bark: #5D4037;          /* Footer, donkere accenten */

    /* Legacy compatibility - map old colors to new */
    --color-primary: var(--color-sunset);
    --color-primary-dark: var(--color-forest);
    --color-primary-light: var(--color-moss-light);
    --color-secondary: var(--color-sunshine);
    --color-success: var(--color-moss);
    --color-error: var(--color-sunset);
    --color-text: var(--color-forest);
    --color-text-light: var(--color-leaf);
    --color-background: #FFFFFF;
    --color-background-alt: var(--color-cream);
    --color-border: var(--color-sand);

    /* ========== TYPOGRAPHY ========== */

    /* Font Families - Speels & Vriendelijk */
    --font-heading: 'Baloo 2', cursive;     /* Headings - Speels, bold */
    --font-body: 'Nunito', sans-serif;      /* Body - Leesbaar, rond */
    --font-family: var(--font-body);        /* Legacy */

    /* Font Sizes */
    --font-size-xs: 0.75rem;       /* 12px */
    --font-size-sm: 0.875rem;      /* 14px */
    --font-size-base: 1rem;        /* 16px */
    --font-size-lg: 1.125rem;      /* 18px */
    --font-size-xl: 1.25rem;       /* 20px */
    --font-size-2xl: 1.5rem;       /* 24px */
    --font-size-3xl: 1.875rem;     /* 30px */
    --font-size-4xl: 2.25rem;      /* 36px */
    --font-size-hero: clamp(2.2rem, 9vw, 4.5rem);  /* Responsive hero */

    /* ========== SPACING SYSTEM ========== */

    --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 */

    /* ========== PLAYFUL BORDER RADIUS ========== */

    --radius-sm: 12px;     /* Inputs, kleine elementen */
    --radius-md: 16px;     /* Standaard cards */
    --radius-lg: 24px;     /* Grote cards */
    --radius-xl: 32px;     /* Hero cards, panels */
    --radius-full: 100px;  /* Pills, chips, ronde buttons */
    --radius-blob: 60% 40% 50% 50% / 50% 50% 40% 60%;  /* Organic shapes */

    /* ========== SHADOWS - Soft & Colorful ========== */

    --shadow-sm: 0 4px 12px rgba(27, 67, 50, 0.08);
    --shadow-md: 0 8px 24px rgba(27, 67, 50, 0.1);
    --shadow-lg: 0 16px 48px rgba(27, 67, 50, 0.12);
    --shadow-xl: 0 20px 32px rgba(27, 67, 50, 0.15);
    --shadow-playful: 0 8px 32px rgba(255, 107, 107, 0.2);
    --shadow-glow: 0 0 40px rgba(116, 198, 157, 0.3);

    /* 3D Button Shadow */
    --shadow-3d: 0 6px 0 var(--color-bark);
    --shadow-3d-hover: 0 10px 0 var(--color-bark);
    --shadow-3d-active: 0 2px 0 var(--color-bark);

    /* ========== TRANSITIONS ========== */

    --transition-fast: 150ms ease;
    --transition-smooth: 300ms ease;
    --transition-normal: 300ms ease;  /* Legacy */
    --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ========== Z-INDEX ========== */

    --z-background: -1;
    --z-base: 0;
    --z-floating-deco: 0;
    --z-dropdown: 100;
    --z-nav: 100;
    --z-panel: 1000;     /* Updated from 200 to stay above map */
    --z-modal: 300;
    --z-loader: 400;

    /* ========== LAYOUT ========== */

    --header-height: 60px;
    --search-panel-width: 400px;
    --max-content-width: 1200px;
}

/* ========== GLOBAL ANIMATIONS ========== */

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-15px) rotate(5deg); }
    75% { transform: translateY(10px) rotate(-5deg); }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    75% { transform: rotate(-15deg); }
}

@keyframes bounceIn {
    0% { opacity: 0; transform: scale(0.3) translateY(-50px); }
    50% { transform: scale(1.1) translateY(0); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes wave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(20deg); }
    75% { transform: rotate(-10deg); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

@keyframes morph {
    0%, 100% { border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%; }
    50% { border-radius: 40% 60% 45% 55% / 55% 45% 60% 40%; }
}