/* Display/heading-font: Space Grotesk (Google Fonts) — vierkant-geometrisch
   met karakter (de middenweg tussen Ahroni's eigenheid en een clean grotesk),
   volledige glyph-set (€, cijfers, é/ë/ç), gewichten Light → Bold.
   Voor productie: zelf-hosten als woff2; nu via Google voor snelle preview. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
    --color-orange: #FF7636;
    --color-orange-hover: #E5602A;
    --color-orange-soft: #FFF1EA;
    --color-orange-glow: rgba(255, 118, 54, 0.18);
    --color-orange-shadow: rgba(255, 118, 54, 0.32);
    --color-white: #FFFFFF;
    --color-black: #0F0E0D;
    --color-text: #0F0E0D;
    --color-text-secondary: #3A3A3A;
    --color-text-muted: #6B6B6B;
    --color-border: #ECEAE6;
    --color-border-strong: #D9D6D0;
    --color-bg: #FFFFFF;
    --color-bg-soft: #F8F6F2;
    --color-bg-card: #FFFFFF;
    --color-warning: #D97706;
    --color-success: #047857;
    --color-error: #B91C1C;

    /* Space Grotesk dekt de volledige Latijnse glyph-set (€, cijfers, é/ë/ç)
       en heeft Light t/m Bold — karaktervol zonder de Ahroni-handicap. */
    --font-display: 'Space Grotesk', system-ui, -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 2.75rem;
    --text-4xl: 3.75rem;

    --leading-tight: 1.05;
    --leading-snug: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;

    --shadow-sm: 0 1px 2px rgba(15, 14, 13, 0.04);
    --shadow-md: 0 6px 24px rgba(15, 14, 13, 0.06);
    --shadow-lg: 0 18px 48px rgba(15, 14, 13, 0.08);
    --shadow-glow-orange: 0 0 0 1px var(--color-orange-glow), 0 18px 48px var(--color-orange-shadow);

    --motion-fast: 120ms;
    --motion-base: 220ms;
    --motion-slow: 380ms;
    --easing-out: cubic-bezier(0.22, 1, 0.36, 1);
    --easing-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    --hit-target: 56px;
    --content-narrow: 520px;
    --content-medium: 760px;
    --content-wide: 1080px;
}