/* ==========================================================================
   Design System Variables
   Tegel Funnel - Dutch Tile Project Style + Agrarian Touch
   ========================================================================== */

:root {
   /* --------------------------------
     Colors - Delft Blue + Agrarian Theme
     -------------------------------- */

   /* Primary - Delft Blue (inspired by Dutch Tile Project) */
   --color-delft-blue: #1e3a5f;
   --color-delft-blue-light: #2d5a8a;
   --color-delft-blue-dark: #142942;
   --color-delft-blue-dim: rgba(30, 58, 95, 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: #fafaf8;
   --bg-secondary: #ffffff;
   --bg-elevated: #f5f4f0;
   --bg-overlay: rgba(250, 250, 248, 0.95);
   --bg-delft: var(--color-delft-blue);

   /* Accent - Delft Blue as primary action */
   --accent-primary: var(--color-delft-blue);
   --accent-primary-light: var(--color-delft-blue-light);
   --accent-primary-dim: var(--color-delft-blue-dim);
   --accent-primary-glow: rgba(30, 58, 95, 0.2);

   /* Secondary Accent - Wheat/Gold agrarian */
   --accent-secondary: var(--color-wheat);
   --accent-secondary-light: var(--color-wheat-light);
   --accent-secondary-dim: rgba(212, 165, 116, 0.15);

   /* Text */
   --text-primary: #1a1a1a;
   --text-secondary: #4a4a4a;
   --text-muted: #7a7a7a;
   --text-inverse: #ffffff;
   --text-delft: var(--color-delft-blue);

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

   /* Borders */
   --border-subtle: rgba(30, 58, 95, 0.08);
   --border-default: rgba(30, 58, 95, 0.15);
   --border-hover: rgba(30, 58, 95, 0.25);
   --border-accent: var(--color-delft-blue);

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

   /* --------------------------------
     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(30, 58, 95, 0.08);
   --shadow-md: 0 4px 6px rgba(30, 58, 95, 0.1);
   --shadow-lg: 0 10px 15px rgba(30, 58, 95, 0.12);
   --shadow-xl: 0 20px 25px rgba(30, 58, 95, 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);
}