/* Partner Referral Portal - Design System */

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    /* Updated Concept Colors */
    --primary: #6a4d99;
    --primary-dark: #583f80;
    --primary-light: #7c5cb0;

    --bg-light: #f7f6f7;
    --bg-dark: #18161c;

    --surface-light: #ffffff;
    --surface-dark: #1c1a22;

    --border-light: #e2e8f0;
    --border-dark: #1e293b;

    --text-slate: #64748b;
}

body {
    font-family: 'Inter', sans-serif;
}

@layer components {
    .auth-card {
        @apply bg-white dark:bg-[#1c1a22] border border-slate-200 dark:border-slate-800 transition-all duration-300;
    }

    .btn-primary {
        @apply bg-[#6a4d99] hover:bg-[#583f80] text-white px-6 py-3 rounded-xl font-bold transition-all transform hover:scale-[1.02] active:scale-[0.98] shadow-lg shadow-primary/20 flex items-center justify-center gap-2;
    }

    .sidebar-nav-link {
        @apply flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-all font-medium;
    }

    .sidebar-nav-link.active {
        @apply bg-[#6a4d99]/10 text-[#6a4d99] font-semibold;
    }

    .stat-card-icon {
        @apply size-10 rounded-lg flex items-center justify-center;
    }

    .form-input {
        @apply w-full bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl py-2.5 px-4 outline-none focus:ring-2 focus:ring-[#6a4d99]/20 focus:border-[#6a4d99] transition-all;
    }
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Material Symbols sizing */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.filled {
    font-variation-settings: 'FILL' 1;
}