/* 
 * 더식판 브랜드 컬러 시스템
 * Brand Color System for TheSikpan
 */

:root {
    /* Primary Brand Colors - 토스 스타일 파란색 */
    --brand-primary-50: #f0f6ff;
    --brand-primary-100: #e6f0ff;
    --brand-primary-200: #b3d1ff;
    --brand-primary-300: #80b2ff;
    --brand-primary-400: #4d94ff;
    --brand-primary-500: #0064FF;  /* Main Brand Color - Toss Blue */
    --brand-primary-600: #0052cc;
    --brand-primary-700: #0041a3;
    --brand-primary-800: #00317a;
    --brand-primary-900: #002052;
    
    /* Secondary Colors - 보조 컬러 */
    --brand-secondary-50: #fdf4ff;
    --brand-secondary-100: #fae8ff;
    --brand-secondary-200: #f5d0fe;
    --brand-secondary-300: #f0abfc;
    --brand-secondary-400: #e879f9;
    --brand-secondary-500: #d946ef;
    --brand-secondary-600: #c026d3;
    --brand-secondary-700: #a21caf;
    --brand-secondary-800: #86198f;
    --brand-secondary-900: #701a75;
    
    /* Success Colors - 성공/완료 상태 */
    --brand-success-50: #f0fdf4;
    --brand-success-100: #dcfce7;
    --brand-success-200: #bbf7d0;
    --brand-success-300: #86efac;
    --brand-success-400: #4ade80;
    --brand-success-500: #22c55e;
    --brand-success-600: #16a34a;
    --brand-success-700: #15803d;
    --brand-success-800: #166534;
    --brand-success-900: #14532d;
    
    /* Warning Colors - 경고/주의 상태 */
    --brand-warning-50: #fffbeb;
    --brand-warning-100: #fef3c7;
    --brand-warning-200: #fde68a;
    --brand-warning-300: #fcd34d;
    --brand-warning-400: #fbbf24;
    --brand-warning-500: #f59e0b;
    --brand-warning-600: #d97706;
    --brand-warning-700: #b45309;
    --brand-warning-800: #92400e;
    --brand-warning-900: #78350f;
    
    /* Error/Danger Colors - 에러/위험 상태 */
    --brand-danger-50: #fef2f2;
    --brand-danger-100: #fee2e2;
    --brand-danger-200: #fecaca;
    --brand-danger-300: #fca5a5;
    --brand-danger-400: #f87171;
    --brand-danger-500: #ef4444;
    --brand-danger-600: #dc2626;
    --brand-danger-700: #b91c1c;
    --brand-danger-800: #991b1b;
    --brand-danger-900: #7f1d1d;
    
    /* Neutral Colors - 중립 컬러 */
    --brand-gray-50: #f9fafb;
    --brand-gray-100: #f3f4f6;
    --brand-gray-200: #e5e7eb;
    --brand-gray-300: #d1d5db;
    --brand-gray-400: #9ca3af;
    --brand-gray-500: #6b7280;
    --brand-gray-600: #4b5563;
    --brand-gray-700: #374151;
    --brand-gray-800: #1f2937;
    --brand-gray-900: #111827;
}

/* Utility classes for brand colors */
.brand-primary { color: var(--brand-primary-500); }
.brand-primary-bg { background-color: var(--brand-primary-500); }
.brand-primary-border { border-color: var(--brand-primary-500); }

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

/* Active/Selected state for navigation */
.nav-item-active {
    background-color: var(--brand-primary-50) !important;
    color: var(--brand-primary-600) !important;
    border-left: 4px solid var(--brand-primary-500) !important;
    font-weight: 600 !important;
    margin-left: -4px !important;
}

.nav-item-active svg {
    color: var(--brand-primary-500) !important;
}

/* Tab active state */
.tab-active {
    color: var(--brand-primary-600);
    border-bottom-color: var(--brand-primary-500);
    border-bottom-width: 2px;
}