/* ====================================================
   COLORS.CSS - ĐỊNH NGHĨA MÀU SẮC CHO TOÀN BỘ ỨNG DỤNG
   ==================================================== */

/* 
   Sử dụng CSS Variables (Custom Properties) để dễ dàng
   thay đổi màu sắc toàn bộ ứng dụng chỉ bằng cách
   sửa ở đây thay vì tìm kiếm trong nhiều file
*/

:root {
    
    /* ===== PRIMARY COLORS - MÀU CHÍNH ===== */
    --color-primary: #667eea;           /* Tím xanh chính */
    --color-primary-dark: #5568d3;      /* Tím xanh đậm */
    --color-primary-light: #7c94f5;     /* Tím xanh nhạt */
    --color-secondary: #764ba2;         /* Tím nâu */
    --color-secondary-dark: #5e3a82;    /* Tím nâu đậm */
    --color-secondary-light: #9364c4;   /* Tím nâu nhạt */
    
    /* ===== GRADIENT BACKGROUNDS ===== */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-primary-reverse: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    --gradient-light: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    --gradient-waiting: linear-gradient(135deg, #ffd93d 0%, #f39c12 100%);
    --gradient-consulting: linear-gradient(135deg, #4dabf7 0%, #228be6 100%);
    --gradient-done: linear-gradient(135deg, #51cf66 0%, #37b24d 100%);
    
    /* ===== STATUS COLORS - MÀU TRẠNG THÁI BỆNH NHÂN ===== */
    
    /* Màu ĐANG CHỜ - Vàng cam */
    --color-waiting: #f39c12;           /* Cam đậm */
    --color-waiting-light: #ffd93d;     /* Vàng nhạt */
    --color-waiting-lighter: #fff3cd;   /* Vàng rất nhạt */
    --color-waiting-dark: #d68910;      /* Cam rất đậm */
    --color-waiting-bg: rgba(243, 156, 18, 0.1);  /* Background trong suốt */
    
    /* Màu ĐANG KHÁM - Xanh dương */
    --color-consulting: #228be6;        /* Xanh dương */
    --color-consulting-light: #4dabf7;  /* Xanh dương nhạt */
    --color-consulting-lighter: #d0ebff; /* Xanh rất nhạt */
    --color-consulting-dark: #1971c2;   /* Xanh đậm */
    --color-consulting-bg: rgba(34, 139, 230, 0.1);
    
    /* Màu ĐÃ XONG - Xanh lá */
    --color-done: #37b24d;              /* Xanh lá */
    --color-done-light: #51cf66;        /* Xanh lá nhạt */
    --color-done-lighter: #d3f9d8;      /* Xanh rất nhạt */
    --color-done-dark: #2f9e44;         /* Xanh đậm */
    --color-done-bg: rgba(55, 178, 77, 0.1);
    
    /* ===== UI COLORS - MÀU GIAO DIỆN ===== */
    
    /* Màu thành công/lỗi/cảnh báo/thông tin */
    --color-success: #51cf66;           /* Xanh lá - thành công */
    --color-success-dark: #37b24d;
    --color-success-light: #8ce99a;
    
    --color-danger: #ff6b6b;            /* Đỏ - nguy hiểm/xóa */
    --color-danger-dark: #ee5a52;
    --color-danger-light: #ff8787;
    
    --color-warning: #ffd93d;           /* Vàng - cảnh báo */
    --color-warning-dark: #f39c12;
    --color-warning-light: #ffe066;
    
    --color-info: #4dabf7;              /* Xanh dương - thông tin */
    --color-info-dark: #228be6;
    --color-info-light: #74c0fc;
    
    /* ===== TEXT COLORS - MÀU CHỮ ===== */
    --color-text-primary: #2c3e50;      /* Chữ đen đậm */
    --color-text-secondary: #7f8c8d;    /* Chữ xám */
    --color-text-muted: #95a5a6;        /* Chữ xám nhạt */
    --color-text-light: #bdc3c7;        /* Chữ rất nhạt */
    --color-text-white: #ffffff;        /* Chữ trắng */
    --color-text-dark: #1a1a1a;         /* Chữ đen hoàn toàn */
    
    /* ===== BACKGROUND COLORS - MÀU NỀN ===== */
    --color-bg-body: #f8f9fa;           /* Nền trang */
    --color-bg-white: #ffffff;          /* Nền trắng */
    --color-bg-light: #f5f7fa;          /* Nền xám nhạt */
    --color-bg-lighter: #fafbfc;        /* Nền xám rất nhạt */
    --color-bg-dark: #2c3e50;           /* Nền đen */
    --color-bg-darker: #1a1a1a;         /* Nền đen đậm */
    
    /* Nền overlay (phủ mờ) */
    --color-overlay: rgba(0, 0, 0, 0.5);
    --color-overlay-light: rgba(0, 0, 0, 0.3);
    --color-overlay-dark: rgba(0, 0, 0, 0.7);
    
    /* ===== BORDER COLORS - MÀU VIỀN ===== */
    --color-border: #e0e0e0;            /* Viền xám */
    --color-border-light: #f0f0f0;      /* Viền xám nhạt */
    --color-border-dark: #cccccc;       /* Viền xám đậm */
    --color-border-focus: var(--color-primary); /* Viền khi focus */
    
    /* ===== SHADOW - BÓ MỜ ===== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.2);
    
    /* Shadow có màu */
    --shadow-primary: 0 4px 15px rgba(102, 126, 234, 0.4);
    --shadow-primary-hover: 0 6px 20px rgba(102, 126, 234, 0.6);
    --shadow-success: 0 4px 15px rgba(81, 207, 102, 0.4);
    --shadow-danger: 0 4px 15px rgba(255, 107, 107, 0.4);
    
    /* ===== SPACING - KHOẢNG CÁCH ===== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    
    /* ===== BORDER RADIUS - BO TRÒN GÓC ===== */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-round: 50%;                /* Bo tròn hoàn toàn */
    --radius-pill: 999px;               /* Bo viên thuốc */
    
    /* ===== FONT SIZE - CỠ CHỮ ===== */
    --font-xs: 0.75rem;     /* 12px */
    --font-sm: 0.875rem;    /* 14px */
    --font-base: 1rem;      /* 16px */
    --font-lg: 1.125rem;    /* 18px */
    --font-xl: 1.25rem;     /* 20px */
    --font-2xl: 1.5rem;     /* 24px */
    --font-3xl: 1.875rem;   /* 30px */
    --font-4xl: 2.25rem;    /* 36px */
    
    /* ===== FONT WEIGHT - ĐỘ DÀY CHỮ ===== */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;
    
    /* ===== TRANSITION - HIỆU ỨNG CHUYỂN ĐỔI ===== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-all: all 0.3s ease;
    
    /* ===== Z-INDEX - LỚP CHỒNG LÊN ===== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* ===== BREAKPOINTS - RESPONSIVE ===== */
    /* Lưu ý: CSS Variables không hoạt động trong @media queries */
    /* Chỉ để tham khảo, sử dụng trong @media bằng giá trị trực tiếp */
    --breakpoint-sm: 576px;     /* Mobile lớn */
    --breakpoint-md: 768px;     /* Tablet */
    --breakpoint-lg: 992px;     /* Desktop nhỏ */
    --breakpoint-xl: 1200px;    /* Desktop lớn */
    --breakpoint-2xl: 1400px;   /* Desktop rất lớn */
}

/* ===== DARK MODE (TÙY CHỌN - CHO TƯƠNG LAI) ===== */
/* Nếu muốn thêm chế độ tối, uncomment phần này */
/*
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg-body: #1a1a1a;
        --color-bg-white: #2c3e50;
        --color-bg-light: #34495e;
        --color-text-primary: #ecf0f1;
        --color-text-secondary: #bdc3c7;
        --color-border: #34495e;
    }
}
*/

/* ===== UTILITY CLASSES - LỚP TIỆN ÍCH ===== */
/* Các class có thể dùng trực tiếp trong HTML */

/* Màu chữ */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-muted { color: var(--color-text-muted) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-white { color: var(--color-text-white) !important; }

/* Màu nền */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-white { background-color: var(--color-bg-white) !important; }
.bg-light { background-color: var(--color-bg-light) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-danger { background-color: var(--color-danger) !important; }
.bg-warning { background-color: var(--color-warning) !important; }

/* Viền */
.border-primary { border-color: var(--color-primary) !important; }
.border-success { border-color: var(--color-success) !important; }
.border-danger { border-color: var(--color-danger) !important; }

/* ===== GHI CHÚ SỬ DỤNG ===== */
/*
CÁCH SỬ DỤNG:

1. Trong CSS khác:
   .my-button {
       background-color: var(--color-primary);
       color: var(--color-text-white);
       border-radius: var(--radius-md);
       padding: var(--spacing-md);
       box-shadow: var(--shadow-md);
   }

2. Thay đổi màu theo trạng thái:
   .btn-waiting {
       background: var(--gradient-waiting);
       border-left: 4px solid var(--color-waiting);
   }

3. Responsive với breakpoints:
   @media (max-width: 768px) {
       .container {
           padding: var(--spacing-sm);
       }
   }

4. Animation với transition:
   .card {
       transition: var(--transition-all);
   }
   .card:hover {
       box-shadow: var(--shadow-lg);
   }
*/