/* Design token mặc định (= theme ribbon-classic). Theme khác chỉ ghi đè các biến này + vài hiệu ứng riêng.
   Quy ước: component KHÔNG đặt màu cứng, chỉ dùng biến --erp-*. */
@layer tokens {
  :root {
    --erp-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Roboto", "Helvetica Neue", Arial, sans-serif;
    --erp-font-display: var(--erp-font);
    --erp-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    --erp-font-size: 14px;

    /* Thang chữ theo vai trò (rem = cỡ chữ người dùng chọn; tỉ lệ ~1.1–1.25 cho giao diện nghiệp vụ).
       Chỉ dùng 6 bậc này — không đặt cỡ chữ lẻ trong component (docs/kien-truc/03-chuan-giao-dien.md). */
    --erp-fs-xs: .857rem;   /* 12px: nhãn phụ, đếm, chú thích, đầu cột nhóm */
    --erp-fs-sm: .929rem;   /* 13px: nhãn ô, nút phụ, ô lưới gọn, nội dung toast */
    --erp-fs-md: 1rem;      /* 14px: chữ thường, ô nhập, ô lưới */
    --erp-fs-lg: 1.143rem;  /* 16px: tiêu đề khối, tiêu đề hộp thoại */
    --erp-fs-xl: 1.429rem;  /* 20px: tiêu đề màn hình */
    --erp-fs-2xl: 1.714rem; /* 24px: số chỉ tiêu (KPI) */

    /* Chuyển động: ngắn, giảm tốc khi đến; không nảy */
    --erp-dur-fast: 120ms;
    --erp-dur: 180ms;
    --erp-ease-out: cubic-bezier(.16, 1, .3, 1);

    /* Nền & bề mặt */
    --erp-bg: #f1f4f8;
    --erp-bg-image: none;
    --erp-surface: #ffffff;
    --erp-surface-2: #f6f8fb;
    --erp-surface-3: #e9eef5;
    --erp-overlay: rgba(15, 23, 42, .45);

    /* Chữ */
    --erp-text: #1b2333;
    --erp-text-muted: #556074;
    --erp-text-faint: #667085;   /* ≥4.5:1 trên nền trắng và nền ứng dụng (chữ phụ, placeholder) */

    /* Viền */
    --erp-border: #e0e5ed;
    --erp-border-strong: #c3ccd9;

    /* Màu nhấn & trạng thái */
    --erp-accent: #1f5fbf;
    --erp-accent-contrast: #ffffff;
    --erp-success: #19764a;
    --erp-warning: #935d00;
    --erp-danger: #bf3328;
    --erp-info: #1b65a3;
    --erp-favorite: #c98a00;     /* ngôi sao Yêu thích */

    /* Hình khối */
    --erp-radius: 6px;
    --erp-radius-sm: 4px;
    --erp-radius-lg: 10px;
    --erp-shadow-sm: 0 1px 2px rgba(15, 23, 42, .08);
    --erp-shadow: 0 2px 8px rgba(15, 23, 42, .10);
    --erp-shadow-lg: 0 14px 36px rgba(15, 23, 42, .20);
    --erp-shadow-inset: inset 0 1px 2px rgba(15, 23, 42, .06);
    --erp-blur: 0px;

    /* Vỏ ứng dụng (thanh tiêu đề, ribbon). Màu nhuốm dẫn xuất từ --erp-primary để đổi theo màu người dùng chọn. */
    --erp-chrome-bg: var(--erp-primary);
    --erp-chrome-text: #ffffff;
    --erp-chrome-muted: rgba(255, 255, 255, .78);
    --erp-chrome-hover: rgba(255, 255, 255, .14);
    --erp-ribbon-bg: #f7f9fc;
    --erp-ribbon-tabs-bg: var(--erp-chrome-bg);
    --erp-ribbon-tab-text: var(--erp-chrome-text);
    --erp-ribbon-tab-active-bg: var(--erp-ribbon-bg);
    --erp-ribbon-tab-active-text: var(--erp-primary);
    --erp-ribbon-border: #d5dbe5;
    --erp-ribbon-btn-hover: color-mix(in srgb, var(--erp-primary) 11%, var(--erp-ribbon-bg));
    --erp-ribbon-btn-active: color-mix(in srgb, var(--erp-primary) 19%, var(--erp-ribbon-bg));
    --erp-panel-bg: var(--erp-surface);
    --erp-docbar-bg: var(--erp-surface-2);

    /* Sidebar dọc */
    --erp-sidebar-w: 268px;
    --erp-rail-w: 60px;
    --erp-sidebar-bg: var(--erp-panel-bg);
    --erp-sidebar-text: var(--erp-text);
    --erp-sidebar-icon: var(--erp-text-muted);
    --erp-sidebar-hover: var(--erp-surface-2);
    --erp-sidebar-active-bg: var(--erp-primary-soft);
    --erp-sidebar-active-text: var(--erp-primary);

    /* Lưới dữ liệu — luôn nền đặc để dễ đọc số */
    --erp-grid-bg: #ffffff;
    --erp-grid-head: #f6f8fb;
    --erp-grid-head-text: #4a5468;
    --erp-grid-alt: #fbfcfe;
    --erp-grid-hover: color-mix(in srgb, var(--erp-primary) 5%, var(--erp-grid-bg));
    --erp-grid-selected: color-mix(in srgb, var(--erp-primary) 15%, var(--erp-grid-bg));
    --erp-grid-line: #edf0f5;
    --erp-grid-foot: #f6f8fb;
    --erp-grid-frozen-shadow: 3px 0 4px -2px rgba(15, 23, 42, .16);

    /* Ô nhập */
    --erp-input-bg: #ffffff;
    --erp-input-border: #c6cedb;
    --erp-input-readonly: #f3f5f9;

    /* Mật độ */
    --erp-row-h: 34px;
    --erp-ctl-h: 34px;
    --erp-gap: 12px;
    --erp-pad: 16px;
    --erp-titlebar-h: 48px;
  }

  :root[data-density="compact"] { --erp-row-h: 28px; --erp-ctl-h: 30px; --erp-gap: 8px; --erp-pad: 10px; --erp-titlebar-h: 42px; }
  :root[data-density="comfortable"] { --erp-row-h: 40px; --erp-ctl-h: 40px; --erp-gap: 16px; --erp-pad: 20px; --erp-titlebar-h: 54px; }
}

/* Biến dẫn xuất — đặt ở lớp utilities để luôn tính theo giá trị theme/người dùng cuối cùng. */
@layer utilities {
  :root, :root[data-theme] {
    --erp-primary: var(--erp-accent-user, var(--erp-accent));
    --erp-on-primary: var(--erp-accent-contrast-user, var(--erp-accent-contrast));   /* chữ trên nền màu chủ đạo */
    --erp-primary-hover: color-mix(in srgb, var(--erp-primary) 84%, #000);
    --erp-primary-soft: color-mix(in srgb, var(--erp-primary) 13%, var(--erp-surface));
    --erp-primary-softer: color-mix(in srgb, var(--erp-primary) 7%, var(--erp-surface));
    --erp-success-soft: color-mix(in srgb, var(--erp-success) 14%, var(--erp-surface));
    --erp-warning-soft: color-mix(in srgb, var(--erp-warning) 16%, var(--erp-surface));
    --erp-danger-soft: color-mix(in srgb, var(--erp-danger) 13%, var(--erp-surface));
    --erp-info-soft: color-mix(in srgb, var(--erp-info) 13%, var(--erp-surface));
    --erp-focus-ring: 0 0 0 2px var(--erp-surface), 0 0 0 4px var(--erp-primary);
  }

  /* Gradient người dùng chọn (js/core/settings.js → applyColors). Đặt ở lớp utilities nên luôn thắng theme.
     Chữ trên thanh tiêu đề do JS chọn trắng/đen theo độ sáng của gradient. */
  :root[data-user-chrome] {
    --erp-chrome-bg: var(--erp-user-chrome);
    --erp-chrome-text: var(--erp-user-chrome-text);
    --erp-chrome-muted: var(--erp-user-chrome-muted);
    --erp-chrome-hover: var(--erp-user-chrome-hover);
    --erp-ribbon-tabs-bg: var(--erp-user-chrome);
    --erp-ribbon-tab-text: var(--erp-user-chrome-text);
  }
  :root[data-user-bg] { --erp-bg-image: var(--erp-user-bg); }
}