/* MO-BANK Unified Color System */

:root {
    /* Primary Brand Colors */
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;  /* Main brand color */
    --primary-600: #2563eb;  /* Primary action color */
    --primary-700: #1d4ed8;  /* Hover states */
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;

    /* Secondary Colors */
    --secondary-50: #f0fdf4;
    --secondary-100: #dcfce7;
    --secondary-200: #bbf7d0;
    --secondary-300: #86efac;
    --secondary-400: #4ade80;
    --secondary-500: #22c55e;  /* Success/positive actions */
    --secondary-600: #16a34a;
    --secondary-700: #15803d;
    --secondary-800: #166534;
    --secondary-900: #14532d;

    /* Neutral Colors */
    --neutral-50: #f9fafb;
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-300: #d1d5db;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;  /* Text color */
    --neutral-800: #1f2937;
    --neutral-900: #111827;

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

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

/* Utility classes for consistent color usage */
.text-primary {
    color: var(--primary-600);
}

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

.bg-primary {
    background-color: var(--primary-600);
}

.bg-primary-hover:hover {
    background-color: var(--primary-700);
}

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

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

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

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

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

.bg-neutral-light {
    background-color: var(--neutral-50);
}

.text-error {
    color: var(--error-600);
}

.bg-error {
    background-color: var(--error-600);
}

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

.bg-warning {
    background-color: var(--warning-600);
}

/* Focus rings */
.focus-primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    border-color: var(--primary-500);
}

/* Button styles */
.btn-primary {
    background-color: var(--primary-600);
    color: white;
    transition: background-color 0.2s ease;
}

.btn-primary:hover {
    background-color: var(--primary-700);
}

.btn-secondary {
    background-color: var(--secondary-600);
    color: white;
    transition: background-color 0.2s ease;
}

.btn-secondary:hover {
    background-color: var(--secondary-700);
}

/* Link styles */
.link-primary {
    color: var(--primary-600);
    transition: color 0.2s ease;
}

.link-primary:hover {
    color: var(--primary-700);
}