/* ==========================================================================
   BMS design tokens - theo hệ thiết kế "BilliardHub" (D:\bms-anh, DESIGN.md).
   File này GIỐNG HỆT nhau ở BMS.PlayerWeb và BMS.AdminStaffWeb (wwwroot/tokens.css);
   sửa một bên thì chép sang bên kia. app.css của từng web chỉ dùng các biến ở đây,
   không viết mã màu trực tiếp.
   Độ tương phản chữ/nền đã kiểm tra đạt WCAG AA (>= 4.5:1) cho chữ thường.
   ========================================================================== */
:root {
    color-scheme: light;

    /* Nền & bề mặt */
    --c-canvas: #F8FAFC;            /* nền trang */
    --c-surface: #FFFFFF;           /* thẻ, thanh bên, header */
    --c-surface-2: #F1F5F9;         /* ô xem trước sản phẩm, nút phụ khi rê chuột */
    --c-surface-3: #E2E8F0;         /* chip, thanh tiến độ */
    --c-border: #E2E8F0;            /* đường kẻ mảnh */
    --c-border-strong: #CBD5E1;     /* viền ô nhập */
    --c-overlay: rgba(15, 23, 42, 0.45);

    /* Chữ */
    --c-text: #0F172A;              /* 17:1 trên nền */
    --c-text-2: #475569;            /* 7.6:1 */
    --c-text-muted: #5A6A80;        /* >= 5:1 trên mọi bề mặt */
    --c-on-primary: #FFFFFF;

    /* Thương hiệu */
    --c-primary: #2563EB;           /* Royal Blue - nút chính, mục đang chọn */
    --c-primary-hover: #1D4ED8;
    --c-primary-soft: #EFF6FF;
    --c-primary-text: #1D4ED8;      /* chữ xanh trên nền primary-soft (6.2:1) */
    --c-secondary: #06B6D4;         /* Electric Cyan - điểm nhấn, gradient */
    --c-secondary-text: #0E7490;
    --c-gradient: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%);

    /* Trạng thái (nền nhạt + chữ đậm) */
    --c-success: #047857;  --c-success-strong: #10B981;  --c-success-soft: #ECFDF5;
    --c-warning: #B45309;  --c-warning-strong: #F59E0B;  --c-warning-soft: #FFFBEB;
    --c-danger: #B91C1C;   --c-danger-strong: #DC2626;   --c-danger-soft: #FEF2F2;
    --c-info: #1D4ED8;     --c-info-soft: #EFF6FF;

    /* Trạng thái bàn: trống = xanh nỉ (thiết kế "Trống"), đang chơi = màu nhấn chính
       + hiệu ứng nhẹ, đã đặt = vàng, bảo trì = xám. */
    --c-table-free: #047857;      --c-table-free-soft: #ECFDF5;
    --c-table-live: #2563EB;      --c-table-live-soft: #EFF6FF;
    --c-table-reserved: #B45309;  --c-table-reserved-soft: #FFFBEB;
    --c-table-off: #475569;       --c-table-off-soft: #F1F5F9;
    --c-felt: #10B981;  --c-felt-light: #34D399;  --c-felt-dark: #047857;  --c-felt-rail: #1E293B;

    /* Chữ */
    --font-heading: "Plus Jakarta Sans", "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
    --font-body: "Be Vietnam Pro", "Segoe UI", Roboto, system-ui, sans-serif;

    /* Bo góc */
    --r-sm: 6px;
    --r-md: 8px;      /* nút, ô nhập */
    --r-lg: 12px;
    --r-xl: 16px;     /* thẻ */
    --r-2xl: 24px;    /* banner lớn */
    --r-full: 9999px;

    /* Đổ bóng (DESIGN.md: Level 1-3) */
    --shadow-1: 0 1px 3px 0 rgba(15, 23, 42, 0.05), 0 1px 2px -1px rgba(15, 23, 42, 0.05);
    --shadow-2: 0 10px 15px -3px rgba(37, 99, 235, 0.08), 0 4px 6px -4px rgba(37, 99, 235, 0.04);
    --shadow-3: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.08);
    --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.25);

    /* Khoảng cách & khung */
    --space-xs: 4px;  --space-sm: 8px;  --space-md: 16px;  --space-lg: 24px;  --space-xl: 32px;
    --sidebar-w: 240px;
    --header-h: 64px;
    --bottom-nav-h: 64px;
    --tap-min: 44px;  /* vùng bấm tối thiểu */
}