@use "sass:color";
@use "sass:meta";

:root {
    // Colors
    --fl-success: #10b981;
    --fl-info: #3b82f6;
    --fl-warning: #f59e0b;
    --fl-error: #ef4444;

    --fl-success-light: color-mix(in srgb, var(--fl-success) 10%, transparent);
    --fl-info-light: color-mix(in srgb, var(--fl-info) 10%, transparent);
    --fl-warning-light: color-mix(in srgb, var(--fl-warning) 10%, transparent);
    --fl-error-light: color-mix(in srgb, var(--fl-error) 10%, transparent);

    --fl-white: #ffffff;
    --fl-black: #000000;
    --fl-bg-light: var(--fl-white);
    --fl-bg-dark: rgb(15, 23, 42);
    --fl-text-light: rgb(75, 85, 99);
    --fl-text-dark: var(--fl-white);

    // Typography
    --fl-font: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --fl-font-size-xs: 0.75rem;
    --fl-font-size-sm: 0.875rem;
    --fl-font-size-base: 1rem;
    --fl-font-size-lg: 1.125rem;
    --fl-font-size-xl: 1.25rem;

    // Spacing scale (rem for consistency)
    --fl-spacing-xs: 0.25rem;
    --fl-spacing-sm: 0.5rem;
    --fl-spacing-md: 0.75rem;
    --fl-spacing-lg: 1rem;
    --fl-spacing-xl: 1.5rem;
    --fl-spacing-2xl: 2rem;

    // Close button sizes
    --fl-close-sm: 1.125rem;
    --fl-close-md: 1.5rem;
    --fl-close-lg: 1.875rem;

    // Border radius
    --fl-border-radius: 4px;
    --fl-radius-sm: 0.25rem;
    --fl-radius-md: 0.5rem;
    --fl-radius-lg: 0.75rem;
    --fl-radius-xl: 1rem;
    --fl-radius-full: 9999px;

    // Shadows
    --fl-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --fl-shadow-dark: 0 4px 12px rgba(0, 0, 0, 0.35);
    --fl-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --fl-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --fl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    // Animation
    --fl-transition: 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    --fl-duration-fast: 0.15s;
    --fl-duration-base: 0.3s;
    --fl-duration-slow: 0.5s;
    --fl-easing-spring: cubic-bezier(0.23, 1, 0.32, 1);
    --fl-easing-material: cubic-bezier(0.4, 0, 0.2, 1);

    // Animation distances
    --fl-slide-sm: 8px;
    --fl-slide-md: 12px;
    --fl-slide-lg: 20px;

    // Legacy aliases (for backwards compatibility)
    --background-color: var(--fl-bg-light);
    --text-color: var(--fl-text-light);
    --dark-background-color: var(--fl-bg-dark);
    --dark-text-color: var(--fl-text-dark);
    --success-color: var(--fl-success);
    --info-color: var(--fl-info);
    --warning-color: var(--fl-warning);
    --error-color: var(--fl-error);
    --success-color-light: var(--fl-success-light);
    --info-color-light: var(--fl-info-light);
    --warning-color-light: var(--fl-warning-light);
    --error-color-light: var(--fl-error-light);
}

@include meta.load-css("wrapper");
@include meta.load-css("container");
@include meta.load-css("progress");
@include meta.load-css("icons");