/**
 * Flex Energi — shared design tokens (marketing + platform + PWA)
 * Load first; do not duplicate :root in other stylesheets.
 */
:root {
    /* Brand palette */
    --color-primary: #355872;
    --color-primary-dark: #2a4559;
    --color-primary-light: #7AAACE;
    --color-secondary: #7AAACE;
    --color-accent: #9CD5FF;
    /* --color-bg: #F7F8F0; */
    --color-bg: #F9F9F9;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;
    --color-background: #F9F9F9;
    /* --color-background: #F7F8F0; */
    --color-text: #355872;
    --color-text-light: #355872;
    --color-text-muted: #6b7c8d;
    --color-border: rgba(53, 88, 114, 0.2);
    --color-light-gray: #9CD5FF;
    --color-gray-50: #F7F8F0;
    --color-gray-100: #e8eef5;
    --color-gray-200: rgba(53, 88, 114, 0.15);
    --color-gray-300: #7AAACE;
    --color-gray-400: #6b7c8d;
    --color-gray-500: #355872;
    --color-gray-600: #2a4559;
    --color-gray-700: #355872;
    --color-gray-800: #2a4559;
    --color-gray-900: #355872;
    --color-section-dark: #1a2f42;
    --color-section-dark-text: #e8eef5;
    --color-section-dark-muted: rgba(232, 239, 245, 0.78);

    /* Typography */
    --font-display: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family: var(--font-body);
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;
    --line-height-tight: 1.2;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --letter-spacing-tight: -0.02em;
    --letter-spacing-wide: 0.025em;

    /* Spacing (marketing scale) */
    --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;

    /* Radius (marketing) */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-2xl: 12px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(53, 88, 114, 0.06);
    --shadow-md: 0 4px 12px rgba(53, 88, 114, 0.08);
    --shadow-lg: 0 8px 24px rgba(53, 88, 114, 0.1);
    --shadow-xl: 0 16px 48px rgba(53, 88, 114, 0.12);
    --shadow: 0 1px 3px rgba(53, 88, 114, 0.08), 0 1px 2px -1px rgba(53, 88, 114, 0.06);
    --shadow-2xl: 0 25px 50px -12px rgba(53, 88, 114, 0.15);

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;

    /* Platform aliases (dense UI readability) */
    --primary-color: var(--color-primary);
    --primary-hover: var(--color-primary-dark);
    --primary-light: #e8eef5;
    --secondary-color: var(--color-secondary);
    --secondary-hover: var(--color-primary-dark);
    --secondary-light: #e8eef5;
    --accent-color: var(--color-secondary);
    --accent-hover: var(--color-primary);

    --success-color: var(--color-success);
    --success-hover: #059669;
    --success-light: #d1fae5;
    --warning-color: var(--color-warning);
    --warning-hover: #d97706;
    --warning-light: #fef3c7;
    --danger-color: var(--color-danger);
    --danger-hover: #dc2626;
    --danger-light: #fee2e2;
    --info-color: var(--color-secondary);
    --info-hover: var(--color-primary);
    --info-light: rgba(156, 213, 255, 0.35);

    --bg-color: var(--color-bg);
    --bg-secondary: #eef2f5;
    --surface-color: #ffffff;
    --card-bg: #ffffff;
    --text-color: #1e293b;
    --text-secondary: #475569;
    --text-muted: var(--color-text-muted);
    --border-color: var(--color-border);
    --border-light: rgba(53, 88, 114, 0.12);

    --spacing-xs: var(--spacing-1);
    --spacing-sm: var(--spacing-2);
    --spacing-md: var(--spacing-3);
    --spacing-base: var(--spacing-4);
    --spacing-lg: var(--spacing-6);
    --spacing-xl: var(--spacing-8);
    --spacing-2xl: var(--spacing-12);
    --spacing-3xl: var(--spacing-16);
    --spacing-4xl: var(--spacing-20);
    --spacing-5xl: var(--spacing-24);

    --ring-width: 2px;
    --ring-offset: 2px;
    --ring-color: var(--primary-color);
    --ring-opacity: 0.5;
    --focus-ring: 0 0 0 var(--ring-offset) var(--surface-color),
        0 0 0 calc(var(--ring-offset) + var(--ring-width)) rgba(53, 88, 114, 0.35);
}