/*
 * Design tokens - nguồn chân lý duy nhất cho màu, khoảng cách, chữ và bo góc.
 *
 * Quy ước:
 *  - Chỉ một màu nhấn duy nhất (--accent). Không thêm màu nhấn thứ hai.
 *  - Màu trung tính dùng thang xám lạnh (slate). Không trộn xám ấm.
 *  - Bo góc theo đúng ba bậc: sm cho ô nhập, md cho thẻ, pill cho badge.
 */
:root {
    /* Màu nhấn: xanh dương của hệ quản trị bán hàng */
    --accent: #1668dc;
    --accent-hover: #0f57bd;
    --accent-active: #0d4aa0;
    --accent-soft: #e8f1fe;
    --accent-border: #bcd8fb;

    /* Thang trung tính lạnh */
    --neutral-0: #ffffff;
    --neutral-25: #fbfcfd;
    --neutral-50: #f5f7fa;
    --neutral-100: #eceff4;
    --neutral-200: #dde2ea;
    --neutral-300: #c6cede;
    --neutral-400: #97a1b5;
    --neutral-500: #6b7688;
    --neutral-600: #4e5768;
    --neutral-700: #38404e;
    --neutral-800: #232a35;
    --neutral-900: #141a23;

    /* Màu trạng thái - dùng cho badge và cảnh báo */
    --success: #147a45;
    --success-soft: #e6f5ed;
    --success-border: #b3e0c8;

    --warning: #9a5b00;
    --warning-soft: #fdf3e2;
    --warning-border: #f5d9a8;

    --danger: #c02626;
    --danger-soft: #fdecec;
    --danger-border: #f6c4c4;

    --info: #1668dc;
    --info-soft: #e8f1fe;
    --info-border: #bcd8fb;

    /* Nền và chữ */
    --bg-app: var(--neutral-50);
    --bg-surface: var(--neutral-0);
    --bg-raised: var(--neutral-25);
    --bg-sidebar: #10233d;
    --bg-sidebar-hover: #1b3252;
    --bg-sidebar-active: #1668dc;

    --text-primary: var(--neutral-900);
    --text-secondary: var(--neutral-600);
    --text-muted: var(--neutral-500);
    --text-inverse: var(--neutral-0);
    --text-sidebar: #b9c6d8;

    --border: var(--neutral-200);
    --border-strong: var(--neutral-300);

    /* Chữ - hệ font hệ thống, tối ưu cho tiếng Việt có dấu */
    --font-sans: "Inter", "Segoe UI", "Noto Sans", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

    --text-xs: 0.75rem;      /* 12px - nhãn phụ, chú thích */
    --text-sm: 0.8125rem;    /* 13px - mật độ mặc định của bảng */
    --text-base: 0.875rem;   /* 14px - nội dung chính */
    --text-md: 1rem;         /* 16px - tiêu đề thẻ */
    --text-lg: 1.125rem;     /* 18px - tiêu đề trang */
    --text-xl: 1.375rem;     /* 22px - số liệu tổng quan */
    --text-2xl: 1.75rem;     /* 28px - số liệu lớn */

    /* Khoảng cách - thang 4px */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* Bo góc - ba bậc cố định */
    --radius-sm: 4px;    /* ô nhập, nút */
    --radius-md: 8px;    /* thẻ, bảng */
    --radius-pill: 999px; /* badge, chip */

    /* Đổ bóng - luôn ám theo màu nền lạnh, không dùng đen thuần */
    --shadow-xs: 0 1px 2px rgba(20, 26, 35, 0.06);
    --shadow-sm: 0 1px 3px rgba(20, 26, 35, 0.08), 0 1px 2px rgba(20, 26, 35, 0.04);
    --shadow-md: 0 4px 12px rgba(20, 26, 35, 0.10);
    --shadow-lg: 0 12px 32px rgba(20, 26, 35, 0.14);

    /* Kích thước khung */
    --sidebar-width: 236px;
    /*
      Bề ngang thanh menu khi đã tự thu. 64px vừa đủ cho biểu tượng 18px cộng
      vùng bấm hai bên - hẹp hơn nữa thì trúng đích trở nên khó, mà mục đích của
      việc thu gọn là nhường chỗ cho bảng chứ không phải tiết kiệm từng điểm ảnh.
    */
    --sidebar-rail: 64px;
    --topbar-height: 56px;
    /* Nội dung trải hết bề ngang màn hình - bảng nhiều cột cần chỗ để thở. */
    --content-max: none;

    /*
      Đệm ngang của ô bảng, khai thành biến để THU LẠI THEO KHỔ MÀN HÌNH.

      Không phải chuyện thẩm mỹ mà là số học của bề rộng tối thiểu: bảng tồn kho
      có 14 cột, mỗi cột hai bên đệm 16px là 448px chỉ để làm khoảng trắng - gần
      một phần ba khổ 1366. Bảng sản phẩm 17 cột thì mất 544px. Đó là lý do chính
      khiến bảng không tài nào vừa khổ, chứ không phải vì chữ dài.

      Giá trị thu dần theo khổ: rộng thì thoáng, hẹp thì dồn chỗ cho chữ.
    */
    --table-pad-x: var(--space-4);
    --table-pad-y: var(--space-3);

    --transition: 140ms cubic-bezier(0.4, 0, 0.2, 1);
}