/* tokens.css — SINH TỪ tokens.json, không sửa tay.
   Quy tắc tên: --ds-<đường dẫn token nối bằng '-'>. Kiểm khớp: node scripts/design-check.mjs --tokens tokens.json --css tokens.css
   Khối :root này được chép nguyên văn vào <style> của mọi HIFI_*.html và components.html (file tự chứa).
   Dự án e-commerce: giá trị vẫn là placeholder trung tính của template ba-design (chưa có brand guideline —
   SAD §7.0; chưa chọn design system — OQ-022; breakpoint/content-max chưa chốt — OQ-018). Xem DS_e-commerce_v1.0.md §0. */
:root{
  --ds-color-bg-canvas:#F6F7F9;
  --ds-color-bg-surface:#FFFFFF;
  --ds-color-bg-subtle:#EEF1F5;
  --ds-color-border-default:#D5DAE1;
  --ds-color-border-strong:#767F8C;
  --ds-color-text-primary:#1B1F24;
  --ds-color-text-secondary:#5B6472;
  --ds-color-text-disabled:#9AA3AF;
  --ds-color-text-inverse:#FFFFFF;
  --ds-color-brand-primary:#2456A6;
  --ds-color-brand-primary-hover:#1C468A;
  --ds-color-brand-primary-subtle:#E7EEF9;
  --ds-color-status-danger:#B42318;
  --ds-color-status-danger-subtle:#FDECEA;
  --ds-color-status-success:#1E7B45;
  --ds-color-status-success-subtle:#E6F4EC;
  --ds-color-status-warning:#B7791F;
  --ds-color-status-warning-subtle:#FFF4DE;
  --ds-color-focus-ring:#2456A6;
  --ds-font-family-base:"Segoe UI","Roboto","Helvetica Neue","Arial",sans-serif;
  --ds-font-family-mono:"SFMono-Regular","Consolas","Menlo",monospace;
  --ds-font-size-xs:12px;
  --ds-font-size-sm:14px;
  --ds-font-size-md:16px;
  --ds-font-size-lg:20px;
  --ds-font-size-xl:24px;
  --ds-font-size-2xl:32px;
  --ds-font-weight-regular:400;
  --ds-font-weight-semibold:600;
  --ds-font-line-height-tight:1.25;
  --ds-font-line-height-normal:1.5;
  --ds-space-1:4px;
  --ds-space-2:8px;
  --ds-space-3:12px;
  --ds-space-4:16px;
  --ds-space-6:24px;
  --ds-space-8:32px;
  --ds-space-12:48px;
  --ds-radius-sm:4px;
  --ds-radius-md:8px;
  --ds-radius-pill:999px;
  --ds-shadow-sm:0px 1px 2px 0px #1B1F2414;
  --ds-shadow-md:0px 4px 12px 0px #1B1F2426;
  --ds-size-control-desktop:36px;
  --ds-size-control-touch:44px;
  --ds-size-icon:20px;
  --ds-size-content-max:1200px;
  --ds-breakpoint-tablet:768px;
  --ds-breakpoint-desktop:1024px;
}