:root {
    /* Colors */
    --bg-body: #f4f5f7;
    --bg-white: #ffffff;
    --bg-card: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-hover: #f8f9fb;
    --bg-input: #f4f5f7;

    --text-primary: #1a1d24;
    --text-secondary: #5f6876;
    --text-muted: #98a1b0;
    --text-label: #7c8491;

    --green: #22c55e;
    --green-dark: #16a34a;
    --green-light: #dcfce7;
    --green-bg: #f0fdf4;
    --red: #ef4444;
    --red-light: #fef2f2;
    --blue: #3b82f6;
    --blue-light: #eff6ff;
    --purple: #8b5cf6;
    --purple-light: #f5f3ff;
    --amber: #f59e0b;
    --amber-light: #fffbeb;
    --orange: #f97316;
    --teal: #14b8a6;

    --border: #e5e7eb;
    --border-light: #f0f1f3;
    
    /* Radius */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 4px;
    
    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
    --shadow: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.08);

    /* Transitions */
    --transition: all 0.2s ease;
    --transition-fast: all 0.15s ease;

    /* Breakpoints (commented out, for reference in @media) */
    /* --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; */

    /* Spacing scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Touch targets */
    --touch-min: 44px;     /* Apple HIG minimum */
    --input-height: 48px;  /* Mobile-friendly input */

    /* Typography - mobile first */
    --font-size-base: 16px;    /* Không nhỏ hơn 16px trên mobile */
    --font-size-sm: 14px;
    --font-size-xs: 12px;
    --font-size-h1: 24px;
    --font-size-h2: 20px;
    --font-size-h3: 18px;
    --font-size-kpi: 28px;

    /* Layout (Mobile default) */
    --sidebar-width: 0px;          /* Mobile: ẩn sidebar */
    --bottom-nav-height: 64px;     /* Mobile bottom nav */
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 768px) {
    :root {
        --sidebar-width: 72px;    /* Tablet: icon-only sidebar */
        --bottom-nav-height: 0px;
    }
}

@media (min-width: 1024px) {
    :root {
        --sidebar-width: 240px;   /* Desktop: full sidebar */
        --bottom-nav-height: 0px;
    }
}