/**
 * Warmtelijn Design Tokens
 * CSS Custom Properties for consistent styling across all modules
 */

:root {
    /* ===== Colors ===== */

    /* Primary: Logo green - trust, professionalism */
    --wl-primary: #0fa878;
    --wl-primary-light: #26eba0;
    --wl-primary-dark: #0c8a63;
    --wl-primary-darker: #067a55;      /* WCAG AA on white: 4.5:1 for text */
    --wl-primary-on-light: #047857;    /* WCAG AA on light bg */
    --wl-primary-rgb: 15, 168, 120;

    /* Accent: Red - urgency, CTAs, "meld storing" */
    --wl-accent: #dc2626;              /* WCAG AA on white: 4.5:1 */
    --wl-accent-hover: #b91c1c;
    --wl-accent-light: #fca5a5;
    --wl-accent-on-light: #b91c1c;     /* WCAG AA on light bg */
    --wl-accent-rgb: 220, 38, 38;

    /* Secondary: Blue - exact logo blue */
    --wl-secondary: #02a3f5;
    --wl-secondary-hover: #0284c7;
    --wl-secondary-light: #5fc5fa;
    --wl-secondary-dark: #0369a1;      /* WCAG AA on white: 4.5:1 for text */
    --wl-secondary-on-light: #0c4a6e;  /* WCAG AA on light bg */

    /* Success */
    --wl-success: #38a169;
    --wl-success-light: #68d391;
    --wl-success-dark: #2f855a;

    /* Warning */
    --wl-warning: #d69e2e;
    --wl-warning-light: #f6e05e;
    --wl-warning-dark: #b7791f;

    /* Error */
    --wl-error: #e53e3e;
    --wl-error-light: #fc8181;
    --wl-error-dark: #c53030;

    /* Neutrals */
    --wl-bg: #f5f7fa;
    --wl-bg-alt: #edf2f7;
    --wl-surface: #ffffff;
    --wl-surface-elevated: #ffffff;
    --wl-border: #e2e8f0;
    --wl-border-light: #edf2f7;
    --wl-border-dark: #cbd5e0;

    /* Text */
    --wl-text: #2d3748;
    --wl-text-light: #4a5568;
    --wl-text-muted: #718096;
    --wl-text-inverse: #ffffff;

    /* ===== Typography ===== */
    --wl-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --wl-font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;

    /* Font sizes */
    --wl-text-xs: 0.75rem;     /* 12px */
    --wl-text-sm: 0.875rem;    /* 14px */
    --wl-text-base: 1rem;      /* 16px */
    --wl-text-lg: 1.125rem;    /* 18px */
    --wl-text-xl: 1.25rem;     /* 20px */
    --wl-text-2xl: 1.5rem;     /* 24px */
    --wl-text-3xl: 1.875rem;   /* 30px */
    --wl-text-4xl: 2.25rem;    /* 36px */
    --wl-text-5xl: 3rem;       /* 48px */

    /* Font weights */
    --wl-font-normal: 400;
    --wl-font-medium: 500;
    --wl-font-semibold: 600;
    --wl-font-bold: 700;

    /* Line heights */
    --wl-leading-none: 1;
    --wl-leading-tight: 1.25;
    --wl-leading-snug: 1.375;
    --wl-leading-normal: 1.5;
    --wl-leading-relaxed: 1.625;

    /* ===== Spacing ===== */
    --wl-space-0: 0;
    --wl-space-1: 0.25rem;   /* 4px */
    --wl-space-2: 0.5rem;    /* 8px */
    --wl-space-3: 0.75rem;   /* 12px */
    --wl-space-4: 1rem;      /* 16px */
    --wl-space-5: 1.25rem;   /* 20px */
    --wl-space-6: 1.5rem;    /* 24px */
    --wl-space-8: 2rem;      /* 32px */
    --wl-space-10: 2.5rem;   /* 40px */
    --wl-space-12: 3rem;     /* 48px */
    --wl-space-16: 4rem;     /* 64px */
    --wl-space-20: 5rem;     /* 80px */
    --wl-space-24: 6rem;     /* 96px */

    /* ===== Layout ===== */
    --wl-container-sm: 640px;
    --wl-container-md: 768px;
    --wl-container-lg: 1024px;
    --wl-container-xl: 1200px;
    --wl-container-2xl: 1400px;

    /* ===== Border Radius ===== */
    --wl-radius-sm: 4px;
    --wl-radius: 8px;
    --wl-radius-md: 8px;
    --wl-radius-lg: 12px;
    --wl-radius-xl: 16px;
    --wl-radius-full: 9999px;

    /* ===== Shadows ===== */
    --wl-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --wl-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --wl-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --wl-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --wl-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15);

    /* ===== Transitions ===== */
    --wl-transition-fast: 150ms ease;
    --wl-transition: 200ms ease;
    --wl-transition-slow: 300ms ease;

    /* ===== Z-Index Scale ===== */
    --wl-z-dropdown: 100;
    --wl-z-sticky: 200;
    --wl-z-fixed: 300;
    --wl-z-modal-backdrop: 400;
    --wl-z-modal: 500;
    --wl-z-toast: 600;

    /* ===== Breakpoints (as reference) ===== */
    /* Use in media queries:
     * @media (min-width: 640px)  - sm
     * @media (min-width: 768px)  - md
     * @media (min-width: 1024px) - lg
     * @media (min-width: 1200px) - xl
     */
}

/* Dark mode support (future) */
@media (prefers-color-scheme: dark) {
    :root.theme-auto {
        /* Override with dark values when implemented */
    }
}