/* EHDS design tokens — single source of truth for colors, spacing, radii, shadows.
 * Loaded BEFORE components.css and any page CSS so cascading variables resolve.
 */
:root {
    /* Brand colors */
    --primary-purple: #8B4DC7;
    --secondary-purple: #A855F7;
    --accent-magenta: #E739FF;
    --vibrant-pink: #FF3D9A;
    --electric-blue: #3B82F6;
    --neon-cyan: #06D6A0;
    --warm-orange: #FF6B35;

    /* Backgrounds */
    --background-dark: #0D0B1E;
    --background-medium: #1A0F2E;
    --background-light: #2D1B3D;
    --surface-1: rgba(13, 11, 30, 0.85);
    --surface-2: rgba(139, 77, 199, 0.08);
    --surface-3: rgba(139, 77, 199, 0.15);

    /* Text */
    --text-white: #FFFFFF;
    --text-light: rgba(255, 255, 255, 0.9);
    --text-muted: rgba(255, 255, 255, 0.65);
    --text-faint: rgba(255, 255, 255, 0.45);

    /* Status */
    --status-success: #06D6A0;
    --status-warning: #ffc857;
    --status-error: #ff6b6b;
    --status-info: #A855F7;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 9999px;

    /* Shadows */
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 15px 35px rgba(139, 77, 199, 0.35);
    --shadow-glow: 0 0 0 3px rgba(168, 85, 247, 0.25);

    /* Layers */
    --z-toast: 9999;
    --z-modal: 9000;
    --z-header: 100;
}