/* CheckinQR — tokens.css: design token (docs/06 §2), dark mode, font tự host. File đầu tiên trong thứ tự <link>:
   tokens → base → components → screens (→ print). Đơn vị: rem cho chữ/khoảng cách/kích thước (1rem = 16px),
   px cho viền/bóng/bo góc/≤ 3px. Không đổi tên/xoá token đang dùng — đổi tên = thêm alias. */

@font-face {
  font-family: "Open Sans Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/OpenSansCondensed-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/OpenSansCondensed-Bold.woff2") format("woff2");
}

:root {
  /* màu thương hiệu & chữ — tông nâu–kem (Quok 30/09/2026) */
  --c-bg:        #fdf8ee;   /* nền trang ấm */
  --c-surface:   #ffffff;   /* nền thẻ, tabbar */
  --c-text:      #2b1c19;   /* chữ chính nâu đậm (16.37:1 trên trắng) */
  --c-text-mut:  #816f45;   /* chữ phụ (4.62:1 trên nền trang) */
  --c-border:    #fbe6b2;   /* viền thẻ, dòng kẻ, tabbar */
  --c-border-strong: #a38a57;   /* viền ô nhập (3.3:1) */
  --c-primary:   #51312c;   /* nền nút chính (nền + viền), nền appbar */
  --c-primary-d: #3e2521;   /* hover nút chính */
  --c-on-primary: #ffffff;  /* chữ/icon trên nền primary (11.5:1) */
  --c-on-primary-mut: #fbe6b2;  /* chữ phụ trên appbar nâu (9.35:1) */
  --c-accent:    #51312c;   /* chữ/icon/viền/outline/accent-color nhấn */
  --c-primary-soft: #fbe6b2;    /* nền nhấn nhẹ: chip toggle / ô nghỉ tuần đang chọn */
  /* màu trạng thái — giữ nguyên */
  --c-danger:    #c62828;   /* chấm ra */
  --c-danger-bg: #fdecea;
  --c-money:     #0f6b3c;   /* số tiền chưa nhận, chấm vào */
  --c-money-bg:  #e8f5ee;
  --c-penalty:   #b3261e;   /* phạt trễ */
  --c-warn:      #a15c00;
  --c-warn-bg:   #fff5e0;
  --c-paid:      #5b6472;   /* đã thanh toán = trung tính */
  /* màu phụ */
  --c-on-strong: #ffffff;   /* chữ trên nền danger/money/warn */
  --c-toast-icon: #4cc38a;  /* icon toast (toast nền --c-text) */
  --c-backdrop:  rgb(0 0 0 / .45);
  --c-overlap:   rgb(198 40 40 / .35);      /* khung giờ chồng nhau = danger 35% */
  --c-line-soft: rgb(81 49 44 / .08);       /* vạch mờ trên nền màu */
  --c-print-bg:  #ffffff;                   /* N2.8h: đầu thẻ khi in — nền trắng, chữ đen (không theo sáng/tối) */
  --c-print-fg:  #000000;
  --c-appbar-bg:   var(--c-primary);
  --c-appbar-text: var(--c-on-primary);
  --c-appbar-mut:  var(--c-on-primary-mut);
  /* tab đang ở (tabbar): nền vàng nhạt + icon/chữ nâu; tối: nền nâu nhạt + chữ kem (N2.4d) */
  --c-tab-active-bg: var(--c-primary-soft);
  --c-tab-active-fg: var(--c-accent);
  /* card giờ làm (Hôm nay): nền đậm cố định, mọi chữ trắng — độc lập sáng/tối như appbar (N2.4d) */
  --c-worked-bg:   #51312c;
  --c-worked-fg:   #ffffff;
  --c-worked-mut:  #fbe6b2;
  --c-worked-base:  var(--c-money);   /* phần giờ cơ bản (thanh tiến độ) */
  --c-worked-extra: #2b5f9e;          /* phần giờ thêm (khung thưởng) */

  /* khoảng cách, bo góc, bóng */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem; --s-6:2rem; --s-7:3rem;
  --r-xs:3px; --r-sm:8px; --r-md:12px; --r-lg:20px; --r-pill:999px;
  --shadow: 0 1px 3px rgb(81 49 44 / .08), 0 4px 12px rgb(81 49 44 / .04);
  --shadow-up: 0 -1px 3px rgb(81 49 44 / .06);

  /* chữ: một font tự host cho cả chữ và số (--f-mono cùng font, số dùng tabular-nums qua .num) */
  --f-sans: "Open Sans Condensed", Arial, sans-serif;
  --f-mono: "Open Sans Condensed", Arial, sans-serif;
  --fs-xs:.75rem; --fs-sm:.8125rem; --fs-base:.875rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-xl:1.25rem;
  --fs-2xl:1.375rem; --fs-3xl:1.75rem; --fs-display:2.5rem; --fs-clock:2.125rem; --fs-clock-lg:3rem;
  --fw-normal:400; --fw-bold:700;
  --lh-tight:1.1; --lh-snug:1.2; --lh-base:1.5;
  --ls-tight:0; --ls-wide:.04em; --ls-code:.12em;

  /* kích thước */
  --tap: 2.75rem;
  --page-max: 30rem; --page-max-admin: 45rem; --tabbar-h: 4rem;
  --h-input: 3.25rem; --h-btn-lg: 3.5rem; --h-btn-sm: 2.25rem; --tile: 6rem; --tile-lg: 8.75rem;
  --icon-sm: 1rem; --icon-md: 1.5rem; --icon-lg: 3rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --c-bg:#1a1512; --c-surface:#241d19; --c-text:#f3e9d8; --c-text-mut:#bfae86;
    --c-border:#3a2f27; --c-border-strong:#7d6a48;
    --c-primary:#fbe6b2; --c-primary-d:#f5d88f; --c-on-primary:#2b1c19; --c-on-primary-mut:#51312c;
    --c-accent:#fbe6b2; --c-primary-soft:#4a3a2a;
    --c-appbar-bg:#51312c; --c-appbar-text:#ffffff; --c-appbar-mut:#fbe6b2;   /* appbar giữ nâu, độc lập sáng/tối */
    --c-worked-bg:#3e2521; --c-worked-base:#0f6b3c;   /* nền đậm hơn một nấc; --c-money tối (#4cc38a) quá sáng cho chữ trắng nên cố định xanh đậm */
    --c-danger:#ef6b6b; --c-danger-bg:#3a1a18; --c-money:#4cc38a; --c-money-bg:#12301f;
    --c-penalty:#f28b82; --c-warn:#f0b35a; --c-warn-bg:#3a2c10; --c-paid:#bfae86;
    --c-on-strong:#1a1512;   /* chữ trên nền money/warn/danger tối (trắng chỉ 1.9–3:1) */
    --c-toast-icon:#0f6b3c;  /* toast nền --c-text sáng */
    --c-line-soft: rgb(0 0 0 / .08);
    --shadow: 0 1px 3px rgb(0 0 0 / .08), 0 4px 12px rgb(0 0 0 / .04);
    --shadow-up: 0 -1px 3px rgb(0 0 0 / .06);
  }
}
/* Hệ số khung giờ — tô màu theo mức, dùng cả trong thanh 24 giờ của Admin */
:root {
  --band-100: #dbe4f0;   /* ×1.00 */
  --band-120: #cfe0d3;   /* ×1.01–1.29 */
  --band-130: #f2e3c4;   /* ×1.30–1.99 */
  --band-200: #f0d3cf;   /* ×2.00–2.99 */
  --band-300: #e3cbe8;   /* ≥ ×3.00 */
}
@media (prefers-color-scheme: dark) {
  :root { --band-100:#2c3a4c; --band-120:#263d2e; --band-130:#4a3d1c; --band-200:#4d2a26; --band-300:#40294a; }
}