/* =====================================================================
   SOLARIZE ENERGY SOLUTIONS — DESIGN TOKENS
   Single source of truth for color, typography, spacing, shadows.
   ===================================================================== */
:root {
  /* ---------- COLOR: BRAND ---------- */
  --color-primary:       #0B6E4F; /* Emerald Green */
  --color-primary-dark:  #084B37; /* Dark Emerald Green */
  --color-accent:        #F5B700; /* Solar Gold / Yellow Accent */
  --color-ink:           #0F172A; /* Deep Slate (headings, primary body text) */
  --color-ink-muted:     #475569; /* Slate 600 (secondary text) */
  
  /* ---------- COLOR: SURFACE ---------- */
  --color-bg:            #ffffff;
  --color-bg-soft:       #f8fafc; /* Ice Slate background */
  --color-sand:          #EDE7DD; /* Warm sandy beige background */
  --color-border:        #e2e8f0; /* Slate 200 */
  --color-white:         #ffffff;

  /* ---------- COLOR: UTILITY ---------- */
  --color-success:       #16A34A; /* Green 600 */
  --color-success-bg:    rgba(22, 163, 74, 0.08);
  --color-error:         #DC2626; /* Red 600 */
  --color-error-bg:      rgba(220, 38, 38, 0.08);
  --color-info:          #0284C7; /* Sky 600 */
  
  /* ---------- GRADIENTS ---------- */
  --gradient-primary-overlay: linear-gradient(180deg, rgba(8, 75, 55, 0.4) 0%, rgba(15, 23, 42, 0.85) 100%);
  --gradient-primary-deep:    linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  --gradient-accent-line:    linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
  --gradient-accent-text:    linear-gradient(135deg, var(--color-accent) 0%, #D4AF37 100%);
  --gradient-premium-glow:   radial-gradient(circle, rgba(245, 183, 0, 0.1) 0%, rgba(11, 110, 79, 0) 70%);
  --gradient-soft-glow:      radial-gradient(circle, rgba(11, 110, 79, 0.06) 0%, rgba(255, 255, 255, 0) 70%);

  /* ---------- TYPOGRAPHY ---------- */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-accent: 'Inter', sans-serif;

  --fs-h1: clamp(2rem, 4vw + 1rem, 3.5rem);
  --fs-h2: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
  --fs-h3: clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-eyebrow: 0.8125rem;

  --lh-heading: 1.2;
  --lh-body: 1.6;

  /* ---------- SPACING SCALE ---------- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --section-padding-y: clamp(3.5rem, 6vw, 6rem); /* Professional generous padding */

  /* ---------- BORDER RADIUS ---------- */
  --radius-card: 16px; 
  --radius-card-lg: 24px;
  --radius-btn: 8px; /* High-end rounded edge */
  --radius-pill: 999px;
  --radius-sm: 8px;

  /* ---------- SHADOWS ---------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.03);
  --shadow-card: 0 4px 20px rgba(15, 23, 42, 0.03), 0 10px 30px rgba(15, 23, 42, 0.04);
  --shadow-card-hover: 0 20px 40px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.02);
  --shadow-header: 0 4px 25px rgba(15, 23, 42, 0.04);
  --shadow-btn-primary: 0 10px 20px rgba(11, 110, 79, 0.2);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.35s;
  --duration-slow: 0.6s;

  /* ---------- LAYOUT ---------- */
  --header-height: 80px;
  --header-height-scrolled: 70px;
  --container-max: 1240px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}