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

:root {
    --primary: 262 83% 58%;
    --primary-hex: #7C3AED;
    --primary-dark: #6D28D9;
    --primary-light: #8B5CF6;
    --primary-50: #F5F3FF;
    --primary-100: #EDE9FE;
    --primary-200: #DDD6FE;
    --primary-600: #7C3AED;
    --primary-700: #6D28D9;
    --primary-800: #5B21B6;
    --primary-900: #4C1D95;

    --gradient-primary: linear-gradient(135deg, hsl(262 83% 58%), hsl(280 65% 55%));
    --gradient-purple: linear-gradient(135deg, hsl(262 83% 58%), hsl(290 70% 50%));
    --gradient-success: linear-gradient(135deg, hsl(160 84% 39%), hsl(142 71% 45%));
    --gradient-warning: linear-gradient(135deg, hsl(38 92% 50%), hsl(25 95% 53%));
    --gradient-danger: linear-gradient(135deg, hsl(0 84% 60%), hsl(350 89% 50%));
    --gradient-info: linear-gradient(135deg, hsl(217 91% 60%), hsl(199 89% 48%));

    --shadow-2xs: 0px 1px 2px rgba(0,0,0,0.03);
    --shadow-xs: 0px 1px 3px rgba(0,0,0,0.04);
    --shadow-sm: 0px 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-md: 0px 6px 10px -2px rgba(0,0,0,0.1);
    --shadow-lg: 0px 10px 15px -3px rgba(0,0,0,0.12);
    --shadow-xl: 0px 20px 25px -5px rgba(0,0,0,0.15);

    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 9px;
    --radius: 8px;
}

* {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

a {
    text-decoration: none;
    color: inherit;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

.animate-slide-up {
    animation: slideUp 0.4s ease-out;
}

.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
    transform: translateY(-2px) scale(1.02);
}

.gradient-primary {
    background: var(--gradient-primary);
}

.gradient-purple {
    background: var(--gradient-purple);
}

.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}