/* =====================================================================
   tt-tokens.css — Design tokens tinhthue.online
   Map sang theme.json: settings.color.palette / typography.fontSizes /
   spacing.spacingSizes / custom.*  (xem docs/DEV-NOTES.md)
   Breakpoint (không dùng được trong var): 360 / 768 / 1200
   ===================================================================== */
:root{
  /* --- Màu thương hiệu --- */
  --tt-primary:#0B3D6B;          /* navy: nút chính, link, heading nhấn */
  --tt-primary-hover:#082E52;
  --tt-primary-soft:#E7EFF7;     /* nền nhạt cho chip / hàng chọn */
  --tt-accent:#A16207;           /* vàng đồng: badge "Cập nhật", điểm nhấn nhỏ */
  --tt-accent-soft:#FBF1DC;

  /* --- Nền, bề mặt, viền --- */
  --tt-bg:#F4F6F9;
  --tt-surface:#FFFFFF;
  --tt-surface-2:#EEF2F6;
  --tt-border:#D5DCE5;
  --tt-border-strong:#9FADBD;

  /* --- Chữ (đạt AA trên surface & bg) --- */
  --tt-text:#131E2B;
  --tt-text-2:#44546A;
  --tt-text-3:#5F6F82;
  --tt-text-inverse:#FFFFFF;
  --tt-link:#0B3D6B;
  --tt-link-hover:#082E52;

  /* --- Trạng thái --- */
  --tt-success:#1B6B3A;  --tt-success-soft:#E4F3E9;  --tt-success-border:#A9D6B8;
  --tt-warn:#7A4E00;     --tt-warn-soft:#FFF3D6;     --tt-warn-border:#F0D48A;
  --tt-error:#B3261E;    --tt-error-soft:#FCEAE8;    --tt-error-border:#F1B2AD;

  /* --- Khối kết quả (màu riêng) --- */
  --tt-result-bg:#0F2F4F;
  --tt-result-text:#FFFFFF;
  --tt-result-muted:#B8C7D9;
  --tt-result-number:#FFD166;
  --tt-result-border:#254B72;

  /* --- Cảnh báo pháp lý / căn cứ (màu riêng) --- */
  --tt-legal:#4A4880;
  --tt-legal-soft:#EEEDF8;
  --tt-legal-border:#C7C4E6;

  --tt-focus:#2F6FB3;

  /* --- Typography: Public Sans (đủ dấu tiếng Việt), scale 6 cấp --- */
  --tt-font:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --tt-fs-xs:0.8125rem;  /* 13 — chú thích, breadcrumb */
  --tt-fs-sm:0.875rem;   /* 14 — nhãn, bảng, meta */
  --tt-fs-md:1rem;       /* 16 — thân bài, ô nhập */
  --tt-fs-lg:1.25rem;    /* 20 — H3, tiêu đề widget */
  --tt-fs-xl:1.5rem;     /* 24 — H2 */
  --tt-fs-2xl:2rem;      /* 32 — H1, số kết quả */
  --tt-lh-tight:1.2;
  --tt-lh-snug:1.35;
  --tt-lh-base:1.6;
  --tt-fw-regular:400;
  --tt-fw-medium:500;
  --tt-fw-semibold:600;
  --tt-fw-bold:700;
  --tt-fw-black:800;

  /* --- Spacing scale --- */
  --tt-sp-1:4px; --tt-sp-2:8px; --tt-sp-3:12px; --tt-sp-4:16px;
  --tt-sp-5:24px; --tt-sp-6:32px; --tt-sp-7:48px; --tt-sp-8:64px;

  /* --- Radius, shadow --- */
  --tt-radius-sm:4px; --tt-radius-md:8px; --tt-radius-lg:12px; --tt-radius-full:999px;
  --tt-shadow-sm:0 1px 2px rgba(19,30,43,.06);
  --tt-shadow-md:0 4px 16px rgba(19,30,43,.08);

  /* --- Kích thước bố cục --- */
  --tt-container:1200px;
  --tt-sidebar:300px;
  --tt-control-h:44px;       /* tối thiểu cho nút & ô nhập */
  --tt-gutter:var(--tt-sp-4);
}