/* Import component stylesheets */
@import 'components/buttons.css';
@import 'components/forms.css';
@import 'components/typography.css';
@import 'components/layout.css';
@import 'components/feedback.css';
@import 'components/dashboard.css';
@import 'components/controls.css';

/* Variables */
:root {
    /* Colors */
    --primary-color: #6161F7;
    --primary-hover: #4f4fdd;
    --secondary-color: #e3e3ff;
    --secondary-hover: #c9c9ff;
    --text-dark: #262626;
    --text-light: #888;
    --text-link: #666;
    --background-light: rgba(255, 255, 255, 0.9);
    --border-light: #ddd;
    --error-color: #ff757f;
    --text-secondary: #545a6d;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 12px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-xxl: 64px;
    
    /* Z-index layers */
    --z-background: -1;
    --z-content: 1;
    --z-dropdown: 10;
    --z-navigation: 100;
    --z-modal: 1000;
    --z-tooltip: 1500;
}

/* Common styles can be added here */ 

.white-svg {
    filter: brightness(0) saturate(100%) invert(1);
}