@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    /* Colors - Primaries */
    --color-primary-main: #0066CC;
    --color-primary-light: #4D94FF;
    --color-primary-dark: #004799;

    /* Colors - Success */
    --color-success-main: #00B894;
    --color-success-light: #55EFC4;
    --color-success-dark: #00916E;

    /* Colors - Neutral Grays */
    --color-gray-50: #F8FAFC;
    --color-gray-100: #F1F5F9;
    --color-gray-200: #E2E8F0;
    --color-gray-300: #CBD5E1;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-900: #0F172A;

    /* Colors - Feedback */
    --color-warning: #F59E0B;
    --color-danger: #EF4444;
    --color-info: #3B82F6;
    --color-white: #FFFFFF;

    /* Typography */
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    
    --text-h1: 700 2rem/1.2 var(--font-main);
    --text-h2: 600 1.5rem/1.3 var(--font-main);
    --text-h3: 600 1.125rem/1.4 var(--font-main);
    --text-body: 400 1rem/1.5 var(--font-main);
    --text-small: 400 0.875rem/1.4 var(--font-main);
    --text-caption: 400 0.75rem/1.3 var(--font-main);

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 40px;
    --spacing-xxl: 48px;

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

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

    /* Transitions */
    --transition-fast: all 0.2s ease;
}