/* ==========================================================================
   tokens.css — Design tokens
   Giá trị màu/kích thước được ĐO từ trang mẫu (P01-REPORT.md mục 1.6).
   Đây là số đo, không phải CSS sao chép: stylesheet này viết mới hoàn toàn.
   ========================================================================== */

:root {
  /* --- Nền (đo được) --- */
  --c-shell:        #680000;
  --c-panel:        #360000;
  --c-panel-2:      #4f0000;
  --c-footer:       #0a0404;
  --c-ink:          #000000;

  /* --- Nhấn --- */
  --c-red:          #d70000;
  --c-red-deep:     #c30000;
  --c-badge:        #e60023;
  --c-gold:         #fce403;
  --c-yellow:       #ffff00;
  --c-orange:       #fc8f00;

  /* --- Chữ --- */
  --c-text:         #ffffff;
  --c-text-dim:     rgba(255, 255, 255, .62);
  --c-text-faint:   rgba(255, 255, 255, .38);
  --c-text-on-gold: #171717;

  /* --- Đường viền / lớp phủ --- */
  --c-line:         rgba(255, 255, 255, .12);
  --c-line-strong:  rgba(255, 255, 255, .26);
  --c-scrim:        rgba(0, 0, 0, .72);
  --c-bar:          rgba(0, 0, 0, .8);

  /* --- Focus (P01: bản gốc chỉ có 5 rule :focus-visible — bản này làm đậm) --- */
  --c-focus:        #6fd3ff;
  --focus-ring:     0 0 0 3px var(--c-ink), 0 0 0 6px var(--c-focus);

  /* --- Kích thước đo được --- */
  --sidebar-w:      230px;
  --sidebar-icon-w: 78px;
  --btn-auth-w:     180px;
  --btn-auth-h:     34px;
  --nav-item-h:     36px;
  --tile-box:       210px;
  --tile-media:     150px;
  --provider-tab-h: 55px;
  --bottombar-h:    44px;
  --topbar-h:       38px;

  /* --- Shell mobile: đo từ site mobile riêng m.33win.com --- */
  --mheader-h:      48px;
  --mnav-h:         64px;
  --c-mheader:      #550000;
  --c-mnav-top:     #c80000;
  --c-mnav-bottom:  #930000;
  --c-mnav-active:  #ed0000;
  --drawer-w:       min(80vw, 268px);

  /* --- Nhịp khoảng cách --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --gutter: clamp(16px, 2.2vw, 34px);
  --section-gap: clamp(32px, 4vw, 56px);

  /* --- Bo góc (đo được) --- */
  --r-pill:  50px;
  --r-md:    15px;
  --r-sm:    5px;
  --r-xs:    3px;
  --r-round: 50%;

  /* --- Chữ --- */
  --ff-base: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  --ff-display: "Segoe UI Semibold", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-nav:    12px;
  --fs-sm:     13px;
  --fs-base:   14px;
  --fs-md:     16px;
  --fs-lg:     20px;
  --fs-h2:     clamp(24px, 2.6vw, 36px);
  --fs-hero:   clamp(26px, 4.2vw, 56px);
  --lh-tight:  1.2;
  --lh-base:   1.45;

  /* --- Chuyển động --- */
  --dur-fast: 140ms;
  --dur:      220ms;
  --ease:     cubic-bezier(.16, 1, .3, 1);

  /* --- Lớp chồng --- */
  --z-content:  1;
  --z-sticky:   20;
  --z-sidebar:  60;
  --z-scrim:    70;
  --z-drawer:   80;
  --z-dialog:   100;
  --z-skip:     120;
}

/* Trang mẫu là giao diện tối cố định. Bản dựng này giữ nguyên hướng đó,
   nên không khai báo biến thể sáng — đây là lựa chọn thiết kế có chủ đích. */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
  }
}