/**
 * Ekoinstal Design Tokens
 * Single source of truth for colors, typography, and spacing.
 *
 * WHY: The plugin used 4 different greens, 3 oranges, and multiple navy shades
 * across templates and inline styles. This file consolidates them into CSS
 * custom properties so changes propagate everywhere automatically.
 *
 * WCAG AA: All text colors meet 4.5:1 contrast ratio on their paired backgrounds.
 */

:root {
    /* === Brand Colors === */
    --eko-navy:        #00073F;
    --eko-navy-light:  #1e293b;
    --eko-green:       #70B221;
    --eko-green-dark:  #5a9a18;
    --eko-green-light: #f0fdf4;
    --eko-orange:      #E85D26;
    --eko-orange-light: #fff7ed;

    /* === Semantic Colors === */
    --eko-text-primary:   #1e293b;
    --eko-text-secondary: #475569;
    --eko-text-muted:     #64748b;
    --eko-text-hint:      #9ca3af;
    --eko-bg-primary:     #ffffff;
    --eko-bg-secondary:   #f8fafc;
    --eko-bg-tertiary:    #f1f5f9;
    --eko-border:         #e5e7eb;
    --eko-border-light:   #f3f4f6;

    /* === Widget-Specific (WCAG AA compliant) === */
    /* Solar: amber theme */
    --eko-solar-gradient-start: #f59e0b;
    --eko-solar-gradient-end:   #d97706;
    --eko-solar-bg:             #fffbeb;
    --eko-solar-text:           #5a2810;  /* 5.8:1 on #fffbeb */
    --eko-solar-heading:        #6b2f0a;  /* 5.1:1 on #fffbeb */
    --eko-solar-accent:         #d97706;
    --eko-solar-metric-bg:      #fef3c7;

    /* Wind: purple theme */
    --eko-wind-gradient-start:  #8b5cf6;
    --eko-wind-gradient-end:    #6d28d9;
    --eko-wind-bg:              #f5f3ff;
    --eko-wind-text:            #2e1065;  /* 7.2:1 on #f5f3ff */
    --eko-wind-heading:         #3b0f80;  /* 6.1:1 on #f5f3ff */
    --eko-wind-accent:          #8b5cf6;

    /* Success / Error / Info */
    --eko-success:      #10b981;
    --eko-success-bg:   #d1fae5;
    --eko-success-text: #065f46;
    --eko-error:        #ef4444;
    --eko-error-bg:     #fef2f2;
    --eko-error-text:   #991b1b;
    --eko-info:         #3b82f6;
    --eko-info-bg:      #eff6ff;
    --eko-info-text:    #1e40af;

    /* === Typography === */
    --eko-font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --eko-font-size-xs:   11px;
    --eko-font-size-sm:   13px;
    --eko-font-size-base: 15px;
    --eko-font-size-lg:   18px;
    --eko-font-size-xl:   20px;
    --eko-font-size-2xl:  24px;

    /* === Spacing === */
    --eko-space-xs:  4px;
    --eko-space-sm:  8px;
    --eko-space-md:  16px;
    --eko-space-lg:  24px;
    --eko-space-xl:  32px;
    --eko-space-2xl: 48px;

    /* === Borders === */
    --eko-radius-sm:  4px;
    --eko-radius-md:  8px;
    --eko-radius-lg:  12px;
    --eko-radius-xl:  16px;

    /* === Shadows === */
    --eko-shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --eko-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --eko-shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
}