:root {
  /* ============================================
     ILUMITEC SOLAR — Design System v3
     Primary: Professional Blue (Trust, Tech)
     Accent: Warm Yellow (Energy, CTA)
     WhatsApp: Emerald (only for WA buttons)
     ============================================ */

  /* Primary — Professional Sky Blue */
  --color-primary: #0ea5e9;
  --color-primary-dark: #0369a1;
  --color-primary-hover: #0284c7;
  --color-primary-light: #e0f2fe; /* Sky 100 */
  --color-primary-subtle: #f0f9ff; /* Sky 50 – section backgrounds */

  /* Accent — Solar Yellow */
  --color-accent: #eab308;       /* Yellow 500 */
  --color-accent-dark: #ca8a04;  /* Yellow 600 */
  --color-accent-hover: #ca8a04; /* Yellow 600 */
  --color-accent-light: #fef9c3; /* Yellow 100 */

  /* Text */
  --color-text-main: #1e293b;   /* Slate 800 – headings */
  --color-text-body: #475569;   /* Slate 600 – body copy */
  --color-text-muted: #94a3b8;  /* Slate 400 – captions, hints */
  --color-text-inverse: #ffffff;

  /* Backgrounds */
  --color-bg-main: #f7f9fb;    /* Modern very light gray */
  --color-bg-alt: #ffffff;     /* Pure white for contrast */
  --color-section-dark: #0f172a; /* Slate 900 – CTA, hero-dark usage */
  --color-surface: #ffffff;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #0ea5e9, #0284c7);
  --gradient-deep-primary: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
  --gradient-whatsapp: linear-gradient(135deg, #10b981, #059669);
  --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.65) 100%);

  /* Borders */
  --color-border: #e2e8f0;      /* Slate 200 */
  --color-border-subtle: #f1f5f9; /* Slate 100 */
  --color-border-dark: rgba(255, 255, 255, 0.12);

  /* Shadows — diffuse, modern, layered */
  --shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --shadow-lg:  0 10px 25px -5px rgb(0 0 0 / 0.08), 0 4px 10px -6px rgb(0 0 0 / 0.04);
  --shadow-xl:  0 20px 40px -10px rgb(0 0 0 / 0.10), 0 8px 16px -8px rgb(0 0 0 / 0.06);
  --shadow-primary-btn: 0 8px 20px -4px rgba(14, 165, 233, 0.35);
  --shadow-accent-btn:  0 8px 20px -4px rgba(234, 179, 8, 0.30);
  --shadow-green-btn:   0 8px 20px -4px rgba(16, 185, 129, 0.30);
  
  /* Advanced Layered Shadows for Deep Premium */
  --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.06);
  --shadow-btn-primary-glow: 0 16px 35px -10px rgba(3, 105, 161, 0.55);
  --shadow-btn-wa-glow: 0 14px 28px -8px rgba(16, 185, 129, 0.5);

  /* Typography */
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

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

  /* Border Radius */
  --radius-xs:  0.375rem;
  --radius-sm:  0.625rem;
  --radius-md:  1rem;
  --radius-lg:  1.5rem;
  --radius-xl:  2.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.165, 0.84, 0.44, 1);

  /* Layout */
  --container-max-width: 1200px;
}