/* @tailwind base;
@tailwind components;
@tailwind utilities; */

/* Custom Colors using CSS variables */
:root {
    /* Primary */
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;

    /* Secondary */
    --secondary-50: #fdf2f8;
    --secondary-100: #fce7f3;
    --secondary-200: #fbcfe8;
    --secondary-300: #f9a8d4;
    --secondary-400: #f472b6;
    --secondary-500: #ec4899;
    --secondary-600: #db2777;
    --secondary-700: #be185d;
    --secondary-800: #9d174d;
    --secondary-900: #831843;

    /* Success */
    --success-50: #ecfdf5;
    --success-100: #d1fae5;
    --success-200: #a7f3d0;
    --success-300: #6ee7b7;
    --success-400: #34d399;
    --success-500: #10b981;
    --success-600: #059669;
    --success-700: #047857;
    --success-800: #065f46;
    --success-900: #064e3b;

    /* Warning */
    --warning-50: #fffbeb;
    --warning-100: #fef3c7;
    --warning-200: #fde68a;
    --warning-300: #fcd34d;
    --warning-400: #fbbf24;
    --warning-500: #f59e0b;
    --warning-600: #d97706;
    --warning-700: #b45309;
    --warning-800: #92400e;
    --warning-900: #78350f;

    /* Danger */
    --danger-50: #fef2f2;
    --danger-100: #fee2e2;
    --danger-200: #fecaca;
    --danger-300: #fca5a5;
    --danger-400: #f87171;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;
    --danger-800: #991b1b;
    --danger-900: #7f1d1d;

    /* Neutral */
    --neutral-50: #fafafa;
    --neutral-100: #f5f5f5;
    --neutral-200: #e5e5e5;
    --neutral-300: #d4d4d4;
    --neutral-400: #a3a3a3;
    --neutral-500: #737373;
    --neutral-600: #525252;
    --neutral-700: #404040;
    --neutral-800: #262626;
    --neutral-900: #171717;
}

/* Optional: Tailwind utilities ke liye custom classes */
.bg-primary-500 {
    background-color: var(--primary-500);
}

.text-primary-500 {
    color: var(--primary-500);
}

.border-primary-500 {
    border-color: var(--primary-500);
}

.bg-secondary-500 {
    background-color: var(--secondary-500);
}

.text-secondary-500 {
    color: var(--secondary-500);
}

.border-secondary-500 {
    border-color: var(--secondary-500);
}

/* Success */
.bg-success-500 {
    background-color: var(--success-500);
}

.text-success-500 {
    color: var(--success-500);
}

/* Warning */
.bg-warning-500 {
    background-color: var(--warning-500);
}

.text-warning-500 {
    color: var(--warning-500);
}

/* Danger */
.bg-danger-500 {
    background-color: var(--danger-500);
}

.text-danger-500 {
    color: var(--danger-500);
}

/* Neutral */
.bg-neutral-500 {
    background-color: var(--neutral-500);
}

.text-neutral-500 {
    color: var(--neutral-500);
}