/* bo-kit — token màu & hình khối, NGUỒN DUY NHẤT: sửa ở đây rồi chạy `node tools/tokens.ts`.
   Nguồn, luật "mỗi mã màu đúng một lần", luật dùng màu: docs/60_fe-integration/styles.md#tokens-source */

:root {
  /* ---- bảng thô: tối ------------------------------------------------ */
  --d-bg: #0a0a0b;
  --d-panel: #141416;
  --d-panel-2: #1c1c1f;
  --d-ink: #fafafa;
  --d-muted: #9ca0a6;
  --d-line: #26262a;
  --d-grid: #1e1e21;
  --d-accent: #10b981;
  /* teal-500 — điểm cuối của --brand-grad; KHÔNG mang nghĩa ngữ nghĩa, chỉ dùng trong gradient.
     Vì sao tách token: docs/60_fe-integration/styles.md#tokens-accent-2 */
  --d-accent-2: #14b8a6;
  --d-accent-ink: #04120c;
  --d-accent-soft: rgba(16, 185, 129, 0.13);
  --d-up: #22c55e;
  --d-down: #f43f5e;
  --d-ok: #10b981;
  --d-warn: #f59e0b;
  --d-bad: #ef4444;
  --d-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --d-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

  /* ---- bảng thô: sáng ----------------------------------------------- */
  --l-bg: #f7f7f6;
  --l-panel: #ffffff;
  --l-panel-2: #f1f1f0;
  --l-ink: #16181b;
  --l-muted: #6b7076;
  --l-line: #e3e4e6;
  --l-grid: #eceded;
  /* emerald-700: emerald-500 của bản tối không đủ tương phản trên nền trắng */
  --l-accent: #047857;
  /* teal-700, cùng lý do bậc màu như --l-accent: teal-500 của bản tối rửa trôi
     trên nền trắng. */
  --l-accent-2: #0f766e;
  --l-accent-ink: #ffffff;
  --l-accent-soft: rgba(4, 120, 87, 0.1);
  --l-up: #12855a;
  --l-down: #c0392f;
  --l-ok: #1a7f4b;
  --l-warn: #96620a;
  --l-bad: #b3261e;
  --l-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  --l-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.18);

  /* ---- ánh xạ ngữ nghĩa: mặc định là TỐI ----------------------------- */
  --bg: var(--d-bg);
  --panel: var(--d-panel);
  --panel-2: var(--d-panel-2);
  --ink: var(--d-ink);
  --muted: var(--d-muted);
  --line: var(--d-line);
  --grid: var(--d-grid);
  --accent: var(--d-accent);
  --accent-2: var(--d-accent-2);
  --accent-ink: var(--d-accent-ink);
  --accent-soft: var(--d-accent-soft);
  --up: var(--d-up);
  --down: var(--d-down);
  --ok: var(--d-ok);
  --warn: var(--d-warn);
  --bad: var(--d-bad);
  --shadow: var(--d-shadow);
  /* Bóng lớp phủ (menu, drawer, modal): cao và loe rộng hơn `--shadow` — trên nền gần đen, bóng
     nông không đủ để mắt nhận ra lớp phủ và mặt phẳng bên dưới là hai tầng. */
  --shadow-lg: var(--d-shadow-lg);

  /* ---- không phụ thuộc chế độ — ngoại lệ cố ý ở cuối khối: `--on-vivid` LẬT theo theme ----
     Vì sao nó nằm ở khối này: docs/60_fe-integration/styles.md#tokens-mode-independent */

  /* Trắng cứng ở cả hai chế độ, cho mặt phẳng mà trắng đúng bất kể theme (vd --glass-edge). Từ
     BACKLOG-044 nhãn nút trên nền đặc up/down KHÔNG dùng token này: xem --on-vivid ngay dưới. */
  --on-solid: #ffffff;

  /* Chữ trên nền NGỮ NGHĨA RỰC của tầng nhấn mạnh (dải --grad-emph-*); lật theo theme, bí danh
     --accent-ink. Vì sao không dùng --on-solid (số đo): docs/60_fe-integration/styles.md#tokens-on-vivid */
  --on-vivid: var(--accent-ink);

  /* Chữ trên dải THƯƠNG HIỆU (--brand-grad, banner Tổng quan) — dải này KHÔNG lật theo theme.
     Bí danh --d-accent-ink; số đo tương phản: docs/60_fe-integration/styles.md#tokens-on-brand */
  --on-brand: var(--d-accent-ink);

  /* ---- hai vai chữ: --num (mọi con số khách đọc để quyết định) và --mono (dò từng ký tự) ----
     Vì sao --num là bí danh --sans, vì sao "Cascadia Mono": docs/60_fe-integration/styles.md#tokens-font-roles */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --num: var(--sans);
  --mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    "Cascadia Mono", Consolas,
    "DejaVu Sans Mono", "Noto Sans Mono", "Liberation Mono",
    monospace;

  /* ---- thang spacing (BACKLOG-020) — ⚠️ --sp-11 (44px) là vùng chạm WCAG 2.5.5, đừng snap về 40px ----
     Nguồn thang và lịch sử: docs/60_fe-integration/styles.md#tokens-spacing */
  --sp-0-5: 2px;
  --sp-1: 4px;
  --sp-1-5: 6px;
  --sp-2: 8px;
  --sp-2-5: 10px;
  --sp-3: 12px;
  --sp-3-5: 14px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-9: 36px;
  --sp-10: 40px;
  --sp-11: 44px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-18: 72px;
  --sp-20: 80px;

  /* ---- thang chữ (BACKLOG-020) — cố ý giữ bước 13px: 12px nhoè dấu tiếng Việt ----
     Lý do và lịch sử: docs/60_fe-integration/styles.md#tokens-type-scale */
  --fs-micro: 10px;   /* th, .chip, .navbal small — luôn đi kèm IN HOA + tracking */
  --fs-2xs: 11px;     /* nhãn kicker, .field label, .bucket .k */
  --fs-xs: 12px;      /* .sub, .hint, .note, .badge, .pill */
  --fs-sm: 13px;      /* td, chữ phụ trong thân */
  --fs-base: 14px;    /* nút, nav, input, .opt .t */
  --fs-md: 15px;      /* body mặc định của trang */
  --fs-lg: 17px;      /* tiêu đề thẻ, KPI dạng gọn */
  --fs-xl: 20px;      /* .bucket .v, giá trên thẻ thị trường */
  --fs-2xl: 24px;     /* .hero h2 */
  --fs-3xl: 30px;     /* .kpi-v */
  --fs-4xl: 36px;     /* .pagehead h1 */
  --fs-5xl: 48px;     /* .hero-big h1 — chỉ trang landing */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 800;

  /* Nhãn IN HOA cần giãn chữ, tiêu đề lớn cần siết lại — hai chiều ngược
     nhau nên tách token, đừng dùng chung một giá trị. */
  --tracking-tight: -0.028em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.09em;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- state layer (BACKLOG-020): phủ --ink mờ lên bề mặt sẵn có, tự đổi chiều theo theme ----
     Lý do: docs/60_fe-integration/styles.md#tokens-state-layer */
  --state-hover: color-mix(in srgb, var(--ink) 6%, transparent);
  --state-active: color-mix(in srgb, var(--ink) 12%, transparent);
  --state-selected: color-mix(in srgb, var(--ink) 10%, transparent);

  /* "Ô nhập liệu lõm xuống" và "bề mặt nổi lên" từng cùng đè lên `--panel-2`: giữ nguyên giá trị
     để không đổi hình, nhưng đặt tên riêng để chỗ dùng nói rõ ý. */
  --surface-inset: var(--panel-2);
  --surface-raised: var(--panel-2);

  /* Transition dùng chung, chép đúng bản gốc (`UX-SPEC.md` §1). Màu chữ nhanh hơn nền (.2s vs .3s)
     là có chủ ý: chữ đổi màu chậm bằng nền thì đọc ra "trễ", không phải "mượt". */
  --tr-surface: background-color 0.3s, border-color 0.3s;
  --tr-color: color 0.2s;
  --tr-transform: transform 0.15s;
  --tr-all: background-color 0.3s, border-color 0.3s, color 0.2s;

  --ring: 2px;
  --ring-offset: 2px;

  /* Banner chào mừng ở màn Tổng quan — dải emerald→teal của bản gốc. */
  --brand-grad: linear-gradient(100deg, #059669 0%, #10b981 45%, #14b8a6 100%);

  /* Gradient CTA/thẻ & glow, dựng bằng color-mix() từ token ngữ nghĩa nên tự đổi theo theme.
     ⚠️ Tầng nhấn mạnh ≤5 phần tử mỗi màn — đếm cái gì: docs/60_fe-integration/styles.md#tokens-emphasis-budget */
  --grad-accent: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, var(--bg)) 100%);
  --grad-up: linear-gradient(135deg, var(--up) 0%, color-mix(in srgb, var(--up) 55%, var(--bg)) 100%);
  --grad-down: linear-gradient(135deg, var(--down) 0%, color-mix(in srgb, var(--down) 55%, var(--bg)) 100%);
  --grad-surface: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  /* Quầng sáng nền, đặt phía sau nội dung (ví dụ hero banner) — không phải viền. */
  --grad-glow-field: radial-gradient(120% 120% at 30% 15%, color-mix(in srgb, var(--accent) 25%, transparent) 0%, transparent 60%);

  /* box-shadow phát sáng — đi cặp với --shadow/--shadow-lg, không thay thế. Chỉ cho hover/focus của
     CTA chính và badge live; đừng gắn mặc định lên mọi nút, glow là điểm nhấn hiếm mới có tác dụng. */
  --glow-accent: 0 0 24px color-mix(in srgb, var(--accent) 45%, transparent);
  --glow-accent-lg: 0 0 48px color-mix(in srgb, var(--accent) 55%, transparent);
  --glow-up: 0 0 20px color-mix(in srgb, var(--up) 45%, transparent);
  --glow-down: 0 0 20px color-mix(in srgb, var(--down) 45%, transparent);
  --glow-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);

  /* ---- tầng nhấn mạnh: dải đa tông + bề mặt glass (BACKLOG-044) --------
     Luật pha màu và bảng tương phản: docs/60_fe-integration/styles.md#tokens-emphasis */

  /* Mỗi dải có bản đục (mặc định, nhánh dự phòng) và bản kính -glass. ⚠️ Hạ --glass-alpha dưới 90% là
     phải đo lại; vì sao hai token chứ không một biến alpha: docs/60_fe-integration/styles.md#tokens-glass-alpha */
  --glass-alpha: 90%;

  /* Dùng LẠI 8px của `.topnav` trong `ui.css`; mọi blur mới đi qua token này. ⚠️ Con position:fixed
     bị backdrop-filter nhốt — hỏi trước khi gắn: docs/60_fe-integration/styles.md#tokens-glass-blur */
  --glass-blur: 8px;

  /* Viền sáng cạnh trên của bề mặt glass (inset box-shadow, xếp chồng được cùng --glow-*).
     Vì sao --on-solid chứ không --ink: docs/60_fe-integration/styles.md#tokens-glass-edge */
  --glass-edge: inset 0 1px 0 color-mix(in srgb, var(--on-solid) 32%, transparent);

  /* Điểm dừng của ba dải — nguồn CHUNG cho bản đục và bản kính, không dùng trực tiếp ở chỗ khác.
     Accent đi hai sắc, up/down CỐ Ý một sắc: docs/60_fe-integration/styles.md#tokens-emph-stops */
  --emph-accent-1: color-mix(in srgb, var(--accent) 68%, var(--ink));
  --emph-accent-2: color-mix(in srgb, var(--accent) 84%, var(--ink));
  --emph-accent-3: color-mix(in srgb, var(--accent-2) 80%, var(--ink));
  --emph-up-1: color-mix(in srgb, var(--up) 68%, var(--ink));
  --emph-up-2: color-mix(in srgb, var(--up) 84%, var(--ink));
  --emph-up-3: color-mix(in srgb, var(--up) 76%, var(--ink));
  --emph-down-1: color-mix(in srgb, var(--down) 68%, var(--ink));
  --emph-down-2: color-mix(in srgb, var(--down) 84%, var(--ink));
  --emph-down-3: color-mix(in srgb, var(--down) 76%, var(--ink));

  --grad-emph-accent: linear-gradient(135deg, var(--emph-accent-1) 0%, var(--emph-accent-2) 45%, var(--emph-accent-3) 100%);
  --grad-emph-up: linear-gradient(135deg, var(--emph-up-1) 0%, var(--emph-up-2) 45%, var(--emph-up-3) 100%);
  --grad-emph-down: linear-gradient(135deg, var(--emph-down-1) 0%, var(--emph-down-2) 45%, var(--emph-down-3) 100%);

  --grad-emph-accent-glass: linear-gradient(135deg,
      color-mix(in srgb, var(--emph-accent-1) var(--glass-alpha), transparent) 0%,
      color-mix(in srgb, var(--emph-accent-2) var(--glass-alpha), transparent) 45%,
      color-mix(in srgb, var(--emph-accent-3) var(--glass-alpha), transparent) 100%);
  --grad-emph-up-glass: linear-gradient(135deg,
      color-mix(in srgb, var(--emph-up-1) var(--glass-alpha), transparent) 0%,
      color-mix(in srgb, var(--emph-up-2) var(--glass-alpha), transparent) 45%,
      color-mix(in srgb, var(--emph-up-3) var(--glass-alpha), transparent) 100%);
  --grad-emph-down-glass: linear-gradient(135deg,
      color-mix(in srgb, var(--emph-down-1) var(--glass-alpha), transparent) 0%,
      color-mix(in srgb, var(--emph-down-2) var(--glass-alpha), transparent) 45%,
      color-mix(in srgb, var(--emph-down-3) var(--glass-alpha), transparent) 100%);
}

/* Sáng theo cài đặt hệ thống, trừ khi người dùng đã tự chọn tối. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: var(--l-bg);
    --panel: var(--l-panel);
    --panel-2: var(--l-panel-2);
    --ink: var(--l-ink);
    --muted: var(--l-muted);
    --line: var(--l-line);
    --grid: var(--l-grid);
    --accent: var(--l-accent);
    --accent-2: var(--l-accent-2);
    --accent-ink: var(--l-accent-ink);
    --accent-soft: var(--l-accent-soft);
    --up: var(--l-up);
    --down: var(--l-down);
    --ok: var(--l-ok);
    --warn: var(--l-warn);
    --bad: var(--l-bad);
    --shadow: var(--l-shadow);
    --shadow-lg: var(--l-shadow-lg);
  }
}

/* Người dùng bấm nút đổi giao diện: thắng cài đặt hệ thống ở cả hai chiều. ⚠️ Phải khai ĐỦ đúng
   tập token của khối @media ở trên (ISSUE-116): docs/60_fe-integration/styles.md#tokens-theme-toggle */
:root[data-theme="light"] {
  --bg: var(--l-bg);
  --panel: var(--l-panel);
  --panel-2: var(--l-panel-2);
  --ink: var(--l-ink);
  --muted: var(--l-muted);
  --line: var(--l-line);
  --grid: var(--l-grid);
  --accent: var(--l-accent);
  --accent-2: var(--l-accent-2);
  --accent-ink: var(--l-accent-ink);
  --accent-soft: var(--l-accent-soft);
  --up: var(--l-up);
  --down: var(--l-down);
  --ok: var(--l-ok);
  --warn: var(--l-warn);
  --bad: var(--l-bad);
  --shadow: var(--l-shadow);
  --shadow-lg: var(--l-shadow-lg);
}