/* ========================================================
   DESIGN TOKENS — Biến CSS toàn cục
   Đã tối ưu cho người lớn tuổi: cỡ chữ lớn, tương phản cao
======================================================== */

/* Base font-size lớn hơn mặc định để dễ đọc */
html {
    font-size: 18px;
}

@media (max-width: 768px) {
    html {
        font-size: 17px;
    }
}

:root {
    /* Colors — Tăng contrast cho người lớn tuổi */
    --primary-color: #1E3A8A; /* Navy Blue */
    --primary-hover: #152B6A;
    
    --bg-body: #F7F7F7; /* Main Background */
    --bg-surface: #FFFFFF; /* Cards and Sidebar */
    
    --text-main: #1A1B1E;
    --text-muted: #4B5563; /* Đậm hơn gốc #6B7280 — dễ đọc hơn */
    
    --danger: #DC2626; /* Đỏ rõ ràng hơn #FF5757 */
    --success: #16A34A; /* Xanh lá rõ ràng — thay cho #7B8483 */
    --warning: #F59E0B;
    
    --border-color: #E5E7EB;
    
    /* Typography */
    --font-main: 'Google Sans', 'Inter', sans-serif;
    --font-size-base: 1rem;     /* 18px desktop, 17px mobile */
    --font-size-sm: 0.889rem;   /* ~16px */
    --font-size-xs: 0.833rem;   /* ~15px */
    
    /* Touch targets — Apple HIG minimum */
    --touch-target-min: 44px;
    
    /* Styling elements */
    --border-radius-sm: 6px;
    --border-radius-md: 8px; /* Buttons */
    --border-radius-lg: 12px; /* Cards */
    
    --box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --transition: all 0.25s ease-in-out;
}