/* ==========================================================================
   DESIGN TOKENS & SYSTEM VARIABLES
   Clean, High-Contrast, Accessible Dutch Insulation Specialist Design System
   ========================================================================== */

:root {
  /* Brand Primary Colors (Deep Emerald & Forest Greens) */
  --color-primary-950: #022c22;
  --color-primary-900: #064e3b;
  --color-primary-800: #065f46;
  --color-primary-700: #047857;
  --color-primary-600: #059669;
  --color-primary-500: #10b981;
  --color-primary-100: #d1fae5;
  --color-primary-50:  #ecfdf5;

  /* Accent Action Colors (High-Visibility Flame Orange) */
  --color-accent-700: #c2410c;
  --color-accent-600: #ea580c;
  --color-accent-500: #f97316;
  --color-accent-400: #fb923c;
  --color-accent-100: #ffedd5;
  --color-accent-50:  #fff7ed;

  /* Trust / Success Emerald */
  --color-success-700: #047857;
  --color-success-600: #059669;
  --color-success-500: #10b981;
  --color-success-100: #d1fae5;
  --color-success-50:  #ecfdf5;

  /* Crisp, High-Contrast Neutrals & Surfaces */
  --color-bg-body: #ffffff;
  --color-bg-surface: #f8fafc;
  --color-bg-surface-alt: #f1f5f9;
  --color-bg-card: #ffffff;
  --color-bg-dark: #064e3b;
  --color-bg-dark-card: #022c22;
  
  /* Text Contrast - WCAG AAA compliant */
  --color-text-main: #0f172a;       /* Slate 900 - ultra crisp on light bg */
  --color-text-body: #334155;       /* Slate 700 - optimal body readability */
  --color-text-muted: #475569;      /* Slate 600 - clear secondary text */
  --color-text-light: #64748b;      /* Slate 500 */
  --color-text-white: #ffffff;
  --color-text-white-muted: #e2e8f0;

  /* Borders - clear & defined */
  --color-border: #cbd5e1;          /* Slate 300 - clear boundary definition */
  --color-border-light: #e2e8f0;    /* Slate 200 */
  --color-border-dark: rgba(255, 255, 255, 0.18);

  /* Typography */
  --font-heading: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-meta: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Subtle, Natural Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.06);

  /* Border Radii */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;

  /* Layout Dimensions */
  --container-max-width: 1320px;
  --header-height: 72px;
  --topbar-height: 38px;
  --sticky-bar-height: 60px;
}