/* ============================================================================
 * Token của design system V365 — chuyển từ project/tokens.json
 * Nguồn: https://claude.ai/artifact/KsSxmRg9ueQXTS1jVyosUR
 *
 * KHÔNG sửa giá trị trong file này. Design system là nguồn duy nhất; muốn đổi
 * màu/chữ thì đổi ở design system rồi sinh lại file này.
 *
 * Theme sáng = mặc định (báo cáo, in ấn). Theme tối = tuỳ chọn.
 * ========================================================================== */

:root {
  /* --- Thương hiệu ------------------------------------------------------- */
  /* Đỏ nhận diện. Logo, dải nhấn tiêu đề, nền nút chính. Tối đa ~10% diện
     tích một trang. KHÔNG dùng làm màu cảnh báo — xem --danger. */
  --brand-red: #e21f2a;
  /* Hover/nhấn của nền brand-red. Chỉ cho nền, không cho chữ. */
  --brand-red-hover: #c4141f;
  /* Đen tuyệt đối của chữ "365" trong logo. CHỈ dùng cho logo. */
  --brand-black: #000000;
  /* Chữ/icon trên nền brand-red (4.70:1). Chữ < 15px thì tăng weight lên 600. */
  --on-brand-red: #ffffff;
  /* Nền nhấn nhẹ màu thương hiệu: dải tiêu đề bảng, vùng highlight. */
  --brand-surface: #fdecec;

  /* --- Mặt phẳng --------------------------------------------------------- */
  --surface: #ffffff;          /* nền chính */
  --surface-sunken: #f5f6f7;   /* dải phân vùng, hàng chẵn của bảng, vùng ghi chú */
  --surface-raised: #ffffff;   /* thẻ, callout — theme sáng phân biệt bằng border */
  --surface-inverse: #121214;  /* nền đảo; chữ trên nền này dùng --ink-inverse */

  /* --- Mực -------------------------------------------------------------- */
  --ink: #17171a;              /* chữ chính (17.9:1) */
  --ink-secondary: #55565b;    /* mô tả, nhãn trường, phụ đề (7.3:1) */
  --ink-muted: #6e6f75;        /* chú thích, ngày tháng (5.0:1) — không mờ hơn mức này */
  --ink-inverse: #ffffff;      /* chữ trên surface-inverse (17.4:1) */
  --ink-accent: #c4141f;       /* tiêu đề mục, số liệu nhấn, link (6.1:1) */

  /* --- Đường viền, focus ------------------------------------------------ */
  --border: #e2e4e7;           /* kẻ trang trí: chia hàng bảng, phân cách khối */
  --border-strong: #8a8d93;    /* viền mang nghĩa: ô nhập, badge, trục biểu đồ (3.3:1) */
  --focus: #17171a;            /* vòng focus: 2px focus + 2px viền lệch màu surface */

  /* --- Trạng thái — LUÔN kèm nhãn chữ hoặc icon, không dùng màu một mình - */
  --success: #0f7a4d;          /* đạt / đúng tiến độ (5.4:1) */
  --warning: #a35a00;          /* cần theo dõi / chậm nhẹ (5.2:1) */
  --danger: #8e1116;           /* rủi ro / vượt ngưỡng (9.4:1) — trầm hơn brand-red */
  --info: #1256a0;             /* thông tin trung tính (7.3:1) */
  --success-surface: #e7f4ed;
  --warning-surface: #fdf1df;
  --danger-surface: #fbeaea;
  --info-surface: #e8f0f9;

  /* --- Chữ -------------------------------------------------------------- */
  --font-sans: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;

  /* --- Khoảng cách: thang 4px ------------------------------------------- */
  --space-1: 4px;    /* khe icon ↔ chữ trong badge */
  --space-2: 8px;    /* padding dọc ô bảng */
  --space-3: 12px;   /* padding ngang ô bảng, khe giữa badge */
  --space-4: 16px;   /* padding trong thẻ, khe giữa đoạn văn */
  --space-5: 20px;   /* padding thẻ lớn */
  --space-6: 24px;   /* khe giữa các khối */
  --space-8: 32px;   /* khe trước tiêu đề cấp 1 */
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* --- Bo góc: mặc định của hệ thống là GÓC VUÔNG ----------------------- */
  --radius-none: 0;      /* bảng, dải nhấn, khối */
  --radius-sm: 4px;      /* badge, nút nhỏ, ô nhập */
  --radius-md: 8px;      /* thẻ số liệu, callout */
  --radius-lg: 12px;     /* khung biểu đồ */
  --radius-pill: 999px;  /* chip lọc */

  /* --- Đổ bóng: dùng rất tiết chế --------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.14);  /* chỉ overlay, popover */
}

/* Theme tối. brand-red giữ nguyên (màu nhận diện), nhưng chữ màu thương hiệu
   phải dùng --ink-accent sáng hơn: brand-red trên nền tối chỉ đạt 3.8:1. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-red: #e21f2a;
    --brand-red-hover: #f5333e;
    --brand-black: #000000;
    --on-brand-red: #ffffff;
    --brand-surface: #331416;

    --surface: #17171a;
    --surface-sunken: #101012;
    --surface-raised: #1f1f23;
    --surface-inverse: #f5f6f7;

    --ink: #f2f2f3;
    --ink-secondary: #b4b5ba;
    --ink-muted: #8b8c92;
    --ink-inverse: #17171a;
    --ink-accent: #ff4d54;

    --border: #2e2f34;
    --border-strong: #6a6c73;
    --focus: #f2f2f3;

    --success: #3fbf87;
    --warning: #e5a53d;
    --danger: #ff7a80;
    --info: #6aa9e8;
    --success-surface: #143024;
    --warning-surface: #332512;
    --danger-surface: #361618;
    --info-surface: #132738;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  --brand-red-hover: #f5333e;
  --brand-surface: #331416;
  --surface: #17171a;
  --surface-sunken: #101012;
  --surface-raised: #1f1f23;
  --surface-inverse: #f5f6f7;
  --ink: #f2f2f3;
  --ink-secondary: #b4b5ba;
  --ink-muted: #8b8c92;
  --ink-inverse: #17171a;
  --ink-accent: #ff4d54;
  --border: #2e2f34;
  --border-strong: #6a6c73;
  --focus: #f2f2f3;
  --success: #3fbf87;
  --warning: #e5a53d;
  --danger: #ff7a80;
  --info: #6aa9e8;
  --success-surface: #143024;
  --warning-surface: #332512;
  --danger-surface: #361618;
  --info-surface: #132738;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* ============================================================================
 * Style chữ — nhóm "Tài liệu · báo cáo". Giao diện phần mềm dùng nhóm này,
 * KHÔNG dùng nhóm slide-*. Không trộn hai nhóm trong cùng một mặt.
 * ========================================================================== */

.doc-display     { font: 700 32px/40px var(--font-sans); letter-spacing: -0.01em; }
.doc-h1          { font: 700 24px/32px var(--font-sans); }
.doc-h2          { font: 600 20px/28px var(--font-sans); }
.doc-h3          { font: 600 16px/24px var(--font-sans); }
.doc-body        { font: 400 15px/24px var(--font-sans); }
.doc-body-strong { font: 600 15px/24px var(--font-sans); }
.doc-small       { font: 400 13px/20px var(--font-sans); }
.doc-caption     { font: 400 12px/18px var(--font-sans); }
.doc-overline    { font: 700 11px/16px var(--font-sans); letter-spacing: 0.1em;
                   text-transform: uppercase; }
.doc-table-header{ font: 600 13px/18px var(--font-sans); }
.doc-table-cell  { font: 400 14px/22px var(--font-sans); }
.doc-metric      { font: 700 28px/34px var(--font-sans); letter-spacing: -0.02em; }

/* Cột số trong bảng: chữ số cùng bề rộng để các hàng thẳng cột. */
.so { font-variant-numeric: tabular-nums; }

/* Vòng focus hai lớp — đủ tương phản trên mọi nền, kể cả nền brand-red. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--surface);
}