/* ─── CrossPaths — Design Tokens ────────────────────────────────────────── */

:root {
    /* Kleuren — warm, uitnodigend palet */
    --color-primary:        #e85d26;
    --color-primary-dark:   #c74a1a;
    --color-primary-light:  #ff8a5c;
    --color-primary-bg:     #fff4ef;

    --color-secondary:      #2d6a4f;
    --color-secondary-dark: #1b4332;
    --color-secondary-light:#52b788;

    --color-accent:         #fbbf24;
    --color-accent-bg:      #fefce8;

    --color-bg:             #fafaf9;
    --color-surface:        #ffffff;
    --color-surface-hover:  #f5f5f4;
    --color-border:         #e7e5e4;
    --color-border-focus:   #e85d26;

    --color-text:           #1c1917;
    --color-text-muted:     #78716c;
    --color-text-light:     #a8a29e;
    --color-text-inverse:   #ffffff;

    --color-success:        #16a34a;
    --color-success-bg:     #f0fdf4;
    --color-warning:        #ca8a04;
    --color-warning-bg:     #fefce8;
    --color-error:          #dc2626;
    --color-error-bg:       #fef2f2;
    --color-info:           #2563eb;
    --color-info-bg:        #eff6ff;

    /* Typografie */
    --font-family:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-family-mono:     'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    --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-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-tight:    1.25;
    --line-height-normal:   1.5;
    --line-height-relaxed:  1.75;

    /* Spacing */
    --space-1:  0.25rem;    /* 4px */
    --space-2:  0.5rem;     /* 8px */
    --space-3:  0.75rem;    /* 12px */
    --space-4:  1rem;       /* 16px */
    --space-5:  1.25rem;    /* 20px */
    --space-6:  1.5rem;     /* 24px */
    --space-8:  2rem;       /* 32px */
    --space-10: 2.5rem;     /* 40px */
    --space-12: 3rem;       /* 48px */
    --space-16: 4rem;       /* 64px */

    /* Radii */
    --radius-sm:    0.25rem;
    --radius-md:    0.5rem;
    --radius-lg:    0.75rem;
    --radius-xl:    1rem;
    --radius-full:  9999px;

    /* Shadows */
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

    /* Transitions */
    --transition-fast:      150ms ease;
    --transition-base:      250ms ease;
    --transition-slow:      350ms ease;

    /* Z-index schaal */
    --z-dropdown:   10;
    --z-sticky:     20;
    --z-overlay:    30;
    --z-modal:      40;
    --z-toast:      50;

    /* Layout */
    --container-max:    64rem;  /* 1024px */
    --header-height:    3.5rem;
    --bottom-nav-height: 3.75rem;
}