/* ==========================================================================
   Design System Variables
   Boer'n Kerstpakket — warme boerenkerst (lichte basis; donkere banden via .theme-dark in kerst.css; zand/goud knoppen)
   ========================================================================== */

:root {
   /* Kerst — warme boerenkerst */
   --color-pine: #1f3d2b;
   --color-pine-light: #2f5a40;
   --color-pine-dark: #142a1d;
   --color-pine-dim: rgba(31, 61, 43, 0.1);
   --color-sand: #d4b98a;
   --color-sand-light: #e9d9bb;
   --color-sand-dark: #b8975f;
   --color-sand-dim: rgba(212, 185, 138, 0.2);
   --color-kraft: #c8a878;
   --color-kraft-light: #e6d3b3;
   --color-kraft-dark: #a88754;

   /* --------------------------------
     Colors - Delft Blue + Agrarian Theme
     -------------------------------- */

   /* Primary - Delft Blue (inspired by Dutch Tile Project) */
   /* Delft-tokens blijven bestaan (componenten gebruiken ze direct), maar wijzen nu naar dennengroen */
   --color-delft-blue: #1f3d2b;
   --color-delft-blue-light: #2f5a40;
   --color-delft-blue-dark: #142a1d;
   --color-delft-blue-dim: rgba(31, 61, 43, 0.1);

   /* Agrarian/Natural Accents */
   --color-wheat: #d4a574;
   --color-wheat-light: #e8c9a8;
   --color-wheat-dark: #b8865a;
   --color-hay: #c9b896;
   --color-earth: #8b7355;
   --color-grass: #5a7a4a;
   --color-grass-light: #7a9a6a;

   /* Backgrounds - Light & Clean */
   --bg-primary: #faf6ee;
   --bg-secondary: #ffffff;
   --bg-elevated: #f3ecdf;
   --bg-overlay: rgba(250, 246, 238, 0.95);
   --bg-delft: var(--color-pine);

   /* Accent - Delft Blue as primary action */
   --accent-primary: var(--color-pine);
   --accent-primary-light: var(--color-pine-light);
   --accent-primary-dim: var(--color-pine-dim);
   --accent-primary-glow: rgba(31, 61, 43, 0.2);

   /* Secondary Accent - Wheat/Gold agrarian */
   --accent-secondary: var(--color-kraft);
   --accent-secondary-light: var(--color-kraft-light);
   --accent-secondary-dim: rgba(200, 168, 120, 0.18);

   --accent-action: var(--color-sand);
   --accent-action-dark: var(--color-sand-dark);

   /* Text */
   --text-primary: #1a1a1a;
   --text-secondary: #4a4538;
   --text-muted: #7a7160;
   --text-inverse: #ffffff;
   --text-delft: var(--color-pine);

   /* Status Colors */
   --success: #5a7a4a;
   --success-dim: rgba(90, 122, 74, 0.12);
   --error: #c44536;
   --error-dim: rgba(196, 69, 54, 0.12);
   --warning: #d4a574;
   --warning-dim: rgba(212, 165, 116, 0.15);

   /* Trustpilot / Review Colors */
   --color-trustpilot: #00b67a;
   --color-trustpilot-dim: rgba(0, 182, 122, 0.1);

   /* Borders */
   --border-subtle: rgba(31, 61, 43, 0.08);
   --border-default: rgba(31, 61, 43, 0.15);
   --border-hover: rgba(31, 61, 43, 0.28);
   --border-accent: var(--color-pine);

   /* --------------------------------
     Typography
     -------------------------------- */

   --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

   /* Font Sizes */
   --text-xs: 0.75rem;
   /* 12px */
   --text-sm: 0.875rem;
   /* 14px */
   --text-base: 1rem;
   /* 16px */
   --text-lg: 1.125rem;
   /* 18px */
   --text-xl: 1.25rem;
   /* 20px */
   --text-2xl: 1.5rem;
   /* 24px */
   --text-3xl: 2rem;
   /* 32px */
   --text-4xl: 3rem;
   /* 48px */

   /* Font Weights */
   --font-normal: 400;
   --font-medium: 500;
   --font-semibold: 600;
   --font-bold: 700;

   /* Line Heights */
   --leading-tight: 1.2;
   --leading-normal: 1.5;
   --leading-relaxed: 1.75;

   /* --------------------------------
     Spacing Scale
     -------------------------------- */

   --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 */
   --space-20: 5rem;
   /* 80px */
   --space-24: 6rem;
   /* 96px */
   --space-32: 8rem;
   /* 128px */

   /* --------------------------------
     Border Radius
     -------------------------------- */

   --radius-sm: 0.375rem;
   /* 6px */
   --radius-md: 0.5rem;
   /* 8px */
   --radius-lg: 0.75rem;
   /* 12px */
   --radius-xl: 1rem;
   /* 16px */
   --radius-2xl: 1.5rem;
   /* 24px */
   --radius-full: 9999px;

   /* --------------------------------
     Shadows
     -------------------------------- */

   --shadow-sm: 0 1px 2px rgba(31, 61, 43, 0.08);
   --shadow-md: 0 4px 6px rgba(31, 61, 43, 0.1);
   --shadow-lg: 0 10px 15px rgba(31, 61, 43, 0.12);
   --shadow-xl: 0 20px 25px rgba(31, 61, 43, 0.15);
   --shadow-glow: 0 0 20px var(--accent-primary-glow);
   --shadow-glow-lg: 0 0 40px var(--accent-primary-glow);

   /* --------------------------------
     Transitions
     -------------------------------- */

   --transition-fast: 150ms ease-out;
   --transition-normal: 200ms ease-out;
   --transition-slow: 300ms ease-out;
   --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

   /* --------------------------------
     Z-Index Scale
     -------------------------------- */

   --z-base: 0;
   --z-dropdown: 100;
   --z-sticky: 200;
   --z-modal: 300;
   --z-toast: 400;
   --z-tooltip: 500;

   /* --------------------------------
     Layout
     -------------------------------- */

   --container-max: 1200px;
   --container-narrow: 800px;
   --header-height: 72px;

   /* --------------------------------
     Legacy compatibility (for existing components)
     -------------------------------- */
   --accent-gold: var(--color-wheat);
   --accent-gold-light: var(--color-wheat-light);
   --accent-gold-dim: var(--accent-secondary-dim);
   --accent-gold-glow: rgba(212, 165, 116, 0.3);
}