{
  "name": "Tiệm Trà Mơ Ước",
  "version": 1,
  "color": {
    "themes": [
      {
        "id": "kem",
        "name": "Kem sữa"
      },
      {
        "id": "nau",
        "name": "Nâu cà phê"
      },
      {
        "id": "socola",
        "name": "Sô cô la"
      },
      {
        "id": "dem",
        "name": "Đêm dịu"
      },
      {
        "id": "hc",
        "name": "Tương phản cao"
      }
    ],
    "tokens": [
      {
        "name": "bg",
        "value": {
          "kem": "#fdf3e4",
          "nau": "#ead9c4",
          "socola": "#d9c2ab",
          "dem": "#2b2433",
          "hc": "#fffaf3"
        },
        "usage": "Nền trang, header HUD, mặt trong của ô nhập, nút nhỏ và ô KPI đặt trên panel."
      },
      {
        "name": "panel",
        "value": {
          "kem": "#fffaf2",
          "nau": "#f7ecdf",
          "socola": "#efe2d4",
          "dem": "#3a3144",
          "hc": "#ffffff"
        },
        "usage": "Bề mặt nổi: pane của tab, card, modal, thẻ khách, khung quầy."
      },
      {
        "name": "line",
        "value": {
          "kem": "#ead7bd",
          "nau": "#cfae8a",
          "socola": "#b8916e",
          "dem": "#574a63",
          "hc": "#806250"
        },
        "usage": "Viền 2px của nút, chip, ô nhập, card; vạch kẻ hàng. Viền trang trí: so với panel chỉ 1.35:1 (Kem sữa) đến 2.26:1 (Sô cô la), dưới 3:1, nên control luôn đổi nền (bg trên panel) để vẫn tách khỏi nền. Tương phản cao: #806250 là viền thật, 5.55:1 trên panel và 5.35:1 trên bg (đạt 3:1 cho viền control). Chỗ cần nền trung tính (rãnh thanh tiến độ, badge, dải tab, ô số) thì dùng fill-muted, đừng lấy line làm nền: line làm nền chỉ còn ở bốn theme gốc nhờ alias fill-muted = line."
      },
      {
        "name": "fill-muted",
        "value": {
          "kem": "{line}",
          "nau": "{line}",
          "socola": "{line}",
          "dem": "{line}",
          "hc": "#eee5db"
        },
        "usage": "Nền trung tính: rãnh thanh tiến độ, badge muted, dải tab, ô số của stepper. Ở bốn theme gốc bằng line (giữ đúng màu game); ở Tương phản cao là #eee5db để chữ ink 14.78:1 và soft 9.45:1 đọc được trên nền này."
      },
      {
        "name": "fill-tabs",
        "value": {
          "kem": "color-mix(in srgb, var(--line) 70%, var(--panel))",
          "nau": "color-mix(in srgb, var(--line) 70%, var(--panel))",
          "socola": "color-mix(in srgb, var(--line) 70%, var(--panel))",
          "dem": "color-mix(in srgb, var(--line) 70%, var(--panel))",
          "hc": "{fill-muted}"
        },
        "usage": "Nền dải tab của FolderTabs. Bốn theme gốc: line pha 70% với panel (giữ đúng màu game); Tương phản cao: fill-muted, chữ ink 14.78:1 (tab chưa chọn)."
      },
      {
        "name": "alpha-tab-idle",
        "value": {
          "kem": ".72",
          "nau": ".72",
          "socola": ".72",
          "dem": ".72",
          "hc": "1"
        },
        "usage": "Độ đục của chữ tab chưa chọn. Tương phản cao: 1 (không làm mờ), để ink đạt 14.78:1 trên fill-tabs."
      },
      {
        "name": "alpha-chalk-group",
        "value": {
          "kem": ".9",
          "nau": ".9",
          "socola": ".9",
          "dem": ".9",
          "hc": "1"
        },
        "usage": "Độ đục tiêu đề nhóm trên bảng phấn. Tương phản cao: 1 (chalk-ink 8.46:1 trên chalk)."
      },
      {
        "name": "alpha-chalk-sub",
        "value": {
          "kem": ".75",
          "nau": ".75",
          "socola": ".75",
          "dem": ".75",
          "hc": "1"
        },
        "usage": "Độ đục tiêu đề nhóm con trên bảng phấn. Tương phản cao: 1 (chalk-ink 8.46:1 trên chalk)."
      },
      {
        "name": "alpha-chalk-extra",
        "value": {
          "kem": ".85",
          "nau": ".85",
          "socola": ".85",
          "dem": ".85",
          "hc": "1"
        },
        "usage": "Độ đục dòng phụ phí (Size L +7k) trên bảng phấn: chalk-ink 8.46:1 giảm còn 6.64:1 ở .85. Tương phản cao: 1 (8.46:1)."
      },
      {
        "name": "alpha-ledger-zero",
        "value": {
          "kem": ".55",
          "nau": ".55",
          "socola": ".55",
          "dem": ".55",
          "hc": ".75"
        },
        "usage": "Độ đục hàng không có số liệu trong sổ sách. Tương phản cao: .75 (ink 8.07:1 trên bg), vẫn nhạt hơn hàng thường. Chỉ an toàn với chữ ink: ở độ đục này soft 5.35, link 4.70, warn 4.69, mint 4.04 đều dưới 7:1, nên hàng không số liệu không được dùng các màu đó."
      },
      {
        "name": "alpha-empty-hint",
        "value": {
          "kem": ".8",
          "nau": ".8",
          "socola": ".8",
          "dem": ".8",
          "hc": "1"
        },
        "usage": "Độ đục dòng gợi ý dưới trạng thái trống (Ngồi chơi xíu đi). Giá trị .8 cho soft 3.69–4.94:1 ở bốn theme gốc, 6.19–6.35:1 ở Tương phản cao nếu giữ; Tương phản cao: 1 (soft 11.33:1 trên bg)."
      },
      {
        "name": "alpha-sign-hint",
        "value": {
          "kem": ".6",
          "nau": ".6",
          "socola": ".6",
          "dem": ".6",
          "hc": "1"
        },
        "usage": "Độ đục gợi ý (✎) cạnh tên quán trên biển. Tương phản cao: 1 (sign-ink 7.04:1 trên sign-paper)."
      },
      {
        "name": "alpha-veil",
        "value": {
          "kem": "75%",
          "nau": "75%",
          "socola": "75%",
          "dem": "75%",
          "hc": "100%"
        },
        "usage": "Tỉ lệ stage-paper của lớp phủ Hết trên khay (color-mix với trong suốt). Chữ stage-muted trên lớp phủ nằm trên tranh nên không đo được: với 75% và nền tranh tối nhất chỉ 5.01:1. Tương phản cao: 100% (đục hẳn), stage-muted 9.13:1 trên stage-paper."
      },
      {
        "name": "alpha-splash-version",
        "value": {
          "kem": ".85",
          "nau": ".85",
          "socola": ".85",
          "dem": ".85",
          "hc": "1"
        },
        "usage": "Độ đục số phiên bản trên splash. Tương phản cao: 1 (stage-soft 9.69:1 trên stage-ground)."
      },
      {
        "name": "ink",
        "value": {
          "kem": "#3a2317",
          "nau": "#3a2317",
          "socola": "#2e1c12",
          "dem": "#f5ecf7",
          "hc": "#1c120c"
        },
        "usage": "Chữ chính trên bg và panel: từ 9.49:1 trở lên ở mọi theme (bg 13.34 · 10.62 · 9.49 · 12.99; panel 14.11 · 12.58 · 12.78 · 10.70). Tương phản cao: 17.72 trên bg, 18.40 trên panel, 14.78 trên fill-muted."
      },
      {
        "name": "soft",
        "value": {
          "kem": "#7a5a48",
          "nau": "#6b4a36",
          "socola": "#5e3f2b",
          "dem": "#cbbad3",
          "hc": "#46342a"
        },
        "usage": "Chữ phụ, nhãn, metadata trên bg và panel: từ 5.52:1 trở lên ở mọi theme. Ngoại lệ: trên fill-muted (= line ở bốn theme gốc: badge muted, số đơn online, nút ✕ dialog) 4.42 · 3.79 · 3.29 · 4.48; hint ô trống (độ đục .8) 3.69–4.94; tab chưa chọn (ink độ đục .72) 5.20 · 4.38 · 4.16 · 5.08. Tương phản cao: 11.33 trên bg, 11.76 trên panel, 9.45 trên fill-muted (nền trung tính thay cho line)."
      },
      {
        "name": "pink",
        "value": {
          "kem": "#ef6f8e",
          "nau": "#9a6340",
          "socola": "#6b3f22",
          "dem": "#f08fb0",
          "hc": "#a3123c"
        },
        "usage": "Màu nhấn của theme: nút chính, chip và trang đang chọn, sọc mái hiên, thẻ đơn online. Chữ on-pink trên nó: 2.86 · 4.96 · 8.90 · 2.27 (Kem sữa · Nâu cà phê · Sô cô la · Đêm dịu), Kem sữa và Đêm dịu dưới chuẩn 4.5:1; giữ đúng như game. Làm chữ (Đơn online) trên panel: 2.76 · 4.26 · 6.99 · 5.44, trên bg 2.61 · 3.60 · 5.19 · 6.60. Tương phản cao (#a3123c): chữ trên panel 7.75, trên bg 7.46; on-pink trên nó 7.75."
      },
      {
        "name": "pink-d",
        "value": {
          "kem": "#c24c69",
          "nau": "#6b3f22",
          "socola": "#4a2a14",
          "dem": "#b85f80",
          "hc": "#6d0a28"
        },
        "usage": "Cạnh nổi 3D dưới nút chính, chữ nhấn (tên quán trên HUD, từ khoá trong lời khách). Chữ trên panel: 4.46 · 7.64 · 10.11 · 2.93 (Kem sữa · Nâu cà phê · Sô cô la · Đêm dịu), trên bg 4.22 · 6.45 · 7.51 · 3.55. Game giữ pink-d cho chữ nhấn ở mọi theme; muốn đạt chuẩn ở Đêm dịu thì ghi đè bằng pink (5.44 trên panel). Tương phản cao: 12.18 trên panel, 11.73 trên bg."
      },
      {
        "name": "on-pink",
        "value": {
          "kem": "#ffffff",
          "nau": "#ffffff",
          "socola": "#ffffff",
          "dem": "#ffffff",
          "hc": "#ffffff"
        },
        "usage": "Chữ và icon trên nền pink. Đạt 4.96:1 (Nâu cà phê) và 8.90:1 (Sô cô la); chỉ 2.86:1 (Kem sữa) và 2.27:1 (Đêm dịu), giữ nguyên trắng như game gốc. Xem mục Khả năng tiếp cận trong README. Tương phản cao: 7.75:1 trên pink."
      },
      {
        "name": "on-fill",
        "value": "#ffffff",
        "usage": "Chữ, icon và viền trắng trên nền đậm cố định: toast-alert 5.38:1, link 4.57:1, warn 3.68:1, street 3.56:1, coach 3.43:1, mint 2.89:1, target 2.68:1, stage-pink 2.57:1, stage-track (chữ % splash) 1.67:1. Ở Tương phản cao các nền đậm đã được tối đi: toast-alert 9.17, street 8.55, street-hi 7.13, coach 9.86, warn 8.11, mint 7.54, link 9.14, gold 7.95, stage-pink 7.75, stage-track (chữ % splash, nhỏ vì sân khấu bị scale) 9.39, target 5.31 (chỉ cho đồ hoạ). Dưới 4.5:1 thì chỉ dùng cho chữ đậm từ 19px, số đếm ngắn kèm icon, hoặc nét viền."
      },
      {
        "name": "focus-ring",
        "value": {
          "kem": "{pink-d}",
          "nau": "{pink-d}",
          "socola": "{pink-d}",
          "dem": "{pink}",
          "hc": "{ink}"
        },
        "usage": "Vòng focus bàn phím 3px, offset 2px. Bổ sung có chủ đích: game gốc dùng pink (2.76:1 trên panel Kem sữa); token này đạt 3:1 trên panel và bg ở cả 4 theme. Tương phản cao: ink, 18.40 trên panel và 17.72 trên bg."
      },
      {
        "name": "art-tint",
        "value": {
          "kem": "#00000000",
          "nau": "#8a5a3b52",
          "socola": "#5b3a2666",
          "dem": "#3b2d5c30",
          "hc": "#00000000"
        },
        "usage": "Lớp phủ màu lên tranh vẽ (quầy, mặt tiền, splash) để tranh hợp với theme; Kem sữa và Tương phản cao không phủ (trong suốt, để tranh giữ nguyên màu). Giá trị gốc: --tint với alpha --tinta (0.32 / 0.4 / 0.19)."
      },
      {
        "name": "mint",
        "value": {
          "kem": "#4fa883",
          "nau": "#4fa883",
          "socola": "#4fa883",
          "dem": "#4fa883",
          "hc": "#18603f"
        },
        "usage": "Trạng thái tốt: mục tiêu đạt, ✓ món đúng, khoản vay/lãi, chữ okline. Làm chữ trên panel: 2.78 · 2.48 · 2.27 · 4.26 (Kem sữa · Nâu cà phê · Sô cô la · Đêm dịu), trên bg 2.63 · 2.10 · 1.69 · 5.18: ba theme sáng dưới 3:1, luôn đi kèm icon ✓ hoặc chữ đậm, không dùng một mình để báo trạng thái. Tương phản cao (#18603f): 7.54 trên panel, 7.26 trên bg, chữ trắng trên nó 7.54."
      },
      {
        "name": "warn",
        "value": {
          "kem": "#e2574c",
          "nau": "#e2574c",
          "socola": "#e2574c",
          "dem": "#e2574c",
          "hc": "#9c1c13"
        },
        "usage": "Cảnh báo và nguy hiểm: hàng sắp hết, lỗ, nút xoá, nhãn Hết, cạnh đỏ của đồng hồ rót. Chữ trên panel 3.54 · 3.16 · 2.89 · 3.35 (Kem sữa · Nâu cà phê · Sô cô la · Đêm dịu), trên bg 3.35 · 2.67 · 2.15 · 4.06: chỉ dùng cho chữ đậm từ 19px hoặc kèm icon. Tương phản cao (#9c1c13): 8.11 trên panel, 7.81 trên bg, chữ trắng trên nó 8.11."
      },
      {
        "name": "gold-lit",
        "value": {
          "kem": "{gold}",
          "nau": "{gold}",
          "socola": "{gold}",
          "dem": "{gold}",
          "hc": "#ffe38a"
        },
        "usage": "Vàng sáng trên nền gỗ tối: tên quán và viền của biển cửa tiệm. Bốn theme gốc bằng gold; Tương phản cao: #ffe38a, 7.61:1 trên điểm sáng nhất của gỗ (wood-dark) vì gold của theme này đã tối đi."
      },
      {
        "name": "gold",
        "value": {
          "kem": "#f0b43c",
          "nau": "#f0b43c",
          "socola": "#f0b43c",
          "dem": "#f0b43c",
          "hc": "#6e4a00"
        },
        "usage": "Sao đánh giá, thanh mục tiêu, viền callout sự kiện trong ngày, nền nâng cấp level. Chữ ink trên gold: 7.89:1 ở bốn theme gốc; ở Tương phản cao ink trên gold chỉ còn 2.32:1, nên nền gold (nâng cấp level, thanh mục tiêu) phải dùng chữ on-fill (7.95:1). Sao gold trên panel 1.79 · 1.59 · 1.46 · 6.64 (Kem sữa · Nâu cà phê · Sô cô la · Đêm dịu), sao HUD trên bg 1.69 · 1.35 · 1.08 · 8.05: ở ba theme sáng luôn kèm điểm số bằng chữ. Tương phản cao (#6e4a00, nâu vàng đậm): 7.95 trên panel, 7.65 trên bg, 6.38 trên fill-muted."
      },
      {
        "name": "counter",
        "value": "#8a5a3b",
        "usage": "Gỗ quầy pha, khung 8px của bảng phấn, viền 3px của biển tên quán."
      },
      {
        "name": "counter-top",
        "value": "#a8714c",
        "usage": "Mặt quầy: viền trên 8px của khối counter."
      },
      {
        "name": "chalk",
        "value": "#2f4a3a",
        "usage": "Nền bảng phấn Menu hôm nay."
      },
      {
        "name": "chalk-ink",
        "value": "#f4efe2",
        "usage": "Chữ phấn trên chalk: 8.46:1. Gạch nối giữa món và giá vẽ bằng chalk-ink ở 25% độ đục."
      },
      {
        "name": "sign-paper",
        "value": "#fff7e8",
        "usage": "Nền biển tên quán."
      },
      {
        "name": "sign-ink",
        "value": "#8a3a50",
        "usage": "Chữ tên quán trên sign-paper: 7.04:1."
      },
      {
        "name": "awning-white",
        "value": "#ffffff",
        "usage": "Sọc trắng của mái hiên, xen với sọc pink 30px."
      },
      {
        "name": "link",
        "value": {
          "kem": "#2b78c5",
          "nau": "#2b78c5",
          "socola": "#2b78c5",
          "dem": "#2b78c5",
          "hc": "#0a4691"
        },
        "usage": "Chữ phản hồi của chủ quán dưới review, thanh doanh thu trong bảng sổ sách. Trên panel 4.40 · 3.92 · 3.59 · 2.70 (Kem sữa · Nâu cà phê · Sô cô la · Đêm dịu): dưới 4.5:1, nên đi kèm nhãn Chủ quán hoặc số bên cạnh. Tương phản cao (#0a4691): 9.14 trên panel, 8.80 trên bg."
      },
      {
        "name": "fresh-1-bg",
        "value": "#fde2e2",
        "usage": "Nền nhãn hạn dùng 1 ngày (life l1)."
      },
      {
        "name": "fresh-1-ink",
        "value": {
          "kem": "#b83a3a",
          "nau": "#b83a3a",
          "socola": "#b83a3a",
          "dem": "#b83a3a",
          "hc": "#781212"
        },
        "usage": "Chữ nhãn hạn dùng 1 ngày trên fresh-1-bg: 4.63:1; Tương phản cao (#781212): 9.06:1."
      },
      {
        "name": "fresh-3-bg",
        "value": "#fdf0cf",
        "usage": "Nền nhãn hạn dùng 3 ngày (life l3)."
      },
      {
        "name": "fresh-3-ink",
        "value": {
          "kem": "#8a6412",
          "nau": "#8a6412",
          "socola": "#8a6412",
          "dem": "#8a6412",
          "hc": "#553b00"
        },
        "usage": "Chữ nhãn hạn dùng 3 ngày trên fresh-3-bg: 4.74:1; Tương phản cao (#553b00): 9.22:1."
      },
      {
        "name": "toast-alert",
        "value": {
          "kem": "#b8433a",
          "nau": "#b8433a",
          "socola": "#b8433a",
          "dem": "#b8433a",
          "hc": "#8a1f17"
        },
        "usage": "Nền toast ưu tiên (phạt, tiền giả, lỗi); chữ trắng 5.38:1; Tương phản cao (#8a1f17): 9.17:1."
      },
      {
        "name": "scrim",
        "value": "rgba(40, 20, 10, 0.65)",
        "usage": "Nền mờ phía sau modal."
      },
      {
        "name": "street",
        "value": {
          "kem": "#ea580c",
          "nau": "#ea580c",
          "socola": "#ea580c",
          "dem": "#ea580c",
          "hc": "#8a2d00"
        },
        "usage": "Nút Xuống Phố: điểm cuối gradient 135°. Chữ trắng 3.56:1, chỉ hợp với nhãn ngắn in đậm. Tương phản cao (#8a2d00): chữ trắng 8.55:1."
      },
      {
        "name": "street-hi",
        "value": {
          "kem": "#f97316",
          "nau": "#f97316",
          "socola": "#f97316",
          "dem": "#f97316",
          "hc": "#9e3400"
        },
        "usage": "Nút Xuống Phố: điểm đầu gradient 135°. Chữ trắng 2.80:1; Tương phản cao (#9e3400): 7.13:1."
      },
      {
        "name": "street-line",
        "value": {
          "kem": "#ffedd5",
          "nau": "#ffedd5",
          "socola": "#ffedd5",
          "dem": "#ffedd5",
          "hc": "#8a2d00"
        },
        "usage": "Viền 1.5px của nút Xuống Phố. Tương phản cao: #8a2d00 (trùng điểm cuối gradient), 8.55:1 với nền trang nên viền nút đạt 3:1."
      },
      {
        "name": "coach",
        "value": {
          "kem": "#4a90c8",
          "nau": "#4a90c8",
          "socola": "#4a90c8",
          "dem": "#4a90c8",
          "hc": "#124574"
        },
        "usage": "Coachmark hướng dẫn chơi và vòng nhấp nháy quanh vùng cần chạm. Chữ trắng 3.43:1, chữ phải đậm từ 19px (sân khấu). Tương phản cao (#124574): chữ trắng 9.86:1."
      },
      {
        "name": "coach-d",
        "value": {
          "kem": "#2f6c9c",
          "nau": "#2f6c9c",
          "socola": "#2f6c9c",
          "dem": "#2f6c9c",
          "hc": "#0b2f4f"
        },
        "usage": "Cạnh 3D dưới coachmark. Tương phản cao: #0b2f4f, đậm hơn coach."
      },
      {
        "name": "stage-ground",
        "value": "#f4e2cc",
        "usage": "Nền phía sau sân khấu splash 768×1376."
      },
      {
        "name": "stage-paper",
        "value": "#fffaf0",
        "usage": "Giấy kem trên tranh: lòng thanh kiên nhẫn, nhãn Đang chờ khách."
      },
      {
        "name": "stage-ink",
        "value": "#4a3526",
        "usage": "Tên game trên splash, phần đã tải của thanh loading."
      },
      {
        "name": "stage-soft",
        "value": {
          "kem": "#6b4e38",
          "nau": "#6b4e38",
          "socola": "#6b4e38",
          "dem": "#6b4e38",
          "hc": "#45311f"
        },
        "usage": "Tagline, thông báo và số phiên bản trên splash; trên stage-ground 5.99:1; Tương phản cao (#45311f): 9.69:1."
      },
      {
        "name": "stage-muted",
        "value": {
          "kem": "#8a6f58",
          "nau": "#8a6f58",
          "socola": "#8a6f58",
          "dem": "#8a6f58",
          "hc": "#5a4030"
        },
        "usage": "Chữ trạng thái chờ trên quầy (Đang chờ khách…, Hết) trên stage-paper: 4.49:1; Tương phản cao (#5a4030): 9.13:1."
      },
      {
        "name": "stage-track",
        "value": {
          "kem": "#d8c6ae",
          "nau": "#d8c6ae",
          "socola": "#d8c6ae",
          "dem": "#d8c6ae",
          "hc": "#5c4033"
        },
        "usage": "Rãnh thanh loading trên splash. Tương phản cao: #5c4033; chữ % trắng 9.39:1 (sân khấu bị scale xuống nên tính là chữ thường, cần 7:1), rãnh 7.42:1 với stage-ground. Rãnh và phần đã tải (stage-fill) chỉ khác nhau 1.96:1 nên phần đã tải có thêm cạnh sáng shadow-fill-edge."
      },
      {
        "name": "stage-fill",
        "value": {
          "kem": "{stage-ink}",
          "nau": "{stage-ink}",
          "socola": "{stage-ink}",
          "dem": "{stage-ink}",
          "hc": "#1c120c"
        },
        "usage": "Phần đã tải của thanh loading splash. Bốn theme gốc bằng stage-ink; Tương phản cao: #1c120c, chữ % trắng 18.4:1; tách khỏi stage-track nhờ cạnh sáng shadow-fill-edge (9.03:1 với rãnh)."
      },
      {
        "name": "stage-pink",
        "value": {
          "kem": "#ef7f98",
          "nau": "#ef7f98",
          "socola": "#ef7f98",
          "dem": "#ef7f98",
          "hc": "#a3123c"
        },
        "usage": "Nút Vào tiệm trên splash (chữ on-fill 36px đậm). Bốn theme gốc: chữ trắng 2.57:1, giữ đúng game. Tương phản cao (#a3123c): chữ trắng 7.75:1."
      },
      {
        "name": "stage-pink-d",
        "value": {
          "kem": "#c95c76",
          "nau": "#c95c76",
          "socola": "#c95c76",
          "dem": "#c95c76",
          "hc": "#6d0a28"
        },
        "usage": "Cạnh 3D 7px dưới nút Vào tiệm trên splash. Tương phản cao: #6d0a28."
      },
      {
        "name": "stage-accent",
        "value": {
          "kem": "#c2506c",
          "nau": "#c2506c",
          "socola": "#c2506c",
          "dem": "#c2506c",
          "hc": "#8a0f33"
        },
        "usage": "Từ khoá món trong lời khách ở quầy, dòng chủ quán trên splash. Trên stage-paper 4.33:1 (chữ lớn); Tương phản cao (#8a0f33): 9.19:1 trên stage-paper, 7.56:1 trên stage-ground (dòng chủ quán trên splash là chữ nhỏ vì sân khấu bị scale)."
      },
      {
        "name": "outline",
        "value": "#4a3120",
        "usage": "Nét viền kiểu tranh vẽ: viền 3px thanh kiên nhẫn ở quầy, chữ nhãn đặt trên tranh."
      },
      {
        "name": "outline-soft",
        "value": "#5a4030",
        "usage": "Viền 2.5px của badge số lượng trên khay topping."
      },
      {
        "name": "wood-dark",
        "value": "#5b3f25",
        "usage": "Rãnh của đồng hồ rót trà."
      },
      {
        "name": "bin-badge",
        "value": "#f3d6b0",
        "usage": "Nền badge số lượng trên khay topping và hũ trà."
      },
      {
        "name": "bin-label-bg",
        "value": {
          "kem": "transparent",
          "nau": "transparent",
          "socola": "transparent",
          "dem": "transparent",
          "hc": "{stage-paper}"
        },
        "usage": "Nền nhãn chữ dưới khay foam (FOAM MATCHA) đặt lên tranh vẽ. Bốn theme gốc: trong suốt (chữ nằm thẳng trên nhãn xanh của tranh, giữ đúng game). Tương phản cao: stage-paper, để stage-ink đạt 11.04:1 (trên nhãn xanh của tranh chỉ 6.36–6.56)."
      },
      {
        "name": "patience",
        "value": {
          "kem": "#8fcf8f",
          "nau": "#8fcf8f",
          "socola": "#8fcf8f",
          "dem": "#8fcf8f",
          "hc": "#2c7a4c"
        },
        "usage": "Phần còn lại của thanh kiên nhẫn ở quầy (đồ hoạ). Trên stage-paper 1.76:1; Tương phản cao (#2c7a4c): 5.05:1."
      },
      {
        "name": "pour-low",
        "value": {
          "kem": "{warn}",
          "nau": "{warn}",
          "socola": "{warn}",
          "dem": "{warn}",
          "hc": "#ff8a7a"
        },
        "usage": "Điểm đầu gradient đồng hồ rót trà (mức còn thấp). Bốn theme gốc bằng warn. Tương phản cao: #ff8a7a, 4.20:1 trên wood-dark (đồ hoạ cần 3:1); warn của theme này chỉ đạt 1.19:1 trên gỗ."
      },
      {
        "name": "pour-mid",
        "value": "#f4b73a",
        "usage": "Điểm giữa (60%) gradient đồng hồ rót: pour-low, pour-mid, pour-high. Tương phản cao: 5.35:1 trên wood-dark."
      },
      {
        "name": "pour-high",
        "value": {
          "kem": "{target}",
          "nau": "{target}",
          "socola": "{target}",
          "dem": "{target}",
          "hc": "#6fd6a0"
        },
        "usage": "Điểm 80% gradient đồng hồ rót (vùng đúng). Bốn theme gốc bằng target. Tương phản cao: #6fd6a0, 5.41:1 trên wood-dark; target của theme này chỉ đạt 1.81:1 trên gỗ."
      },
      {
        "name": "target",
        "value": {
          "kem": "#5aae86",
          "nau": "#5aae86",
          "socola": "#5aae86",
          "dem": "#5aae86",
          "hc": "#1f7a4f"
        },
        "usage": "Vùng đúng ở quầy: viền 4px của khay đã chọn, viền ô thành phần đã xong. Tương phản cao (#1f7a4f): 5.31:1 trên panel, chữ trắng 5.31:1 (đồ hoạ)."
      },
      {
        "name": "want",
        "value": {
          "kem": "#ff6a00",
          "nau": "#ff6a00",
          "socola": "#ff6a00",
          "dem": "#ff6a00",
          "hc": "#b83900"
        },
        "usage": "Viền ngoài nhấp nháy của khay mà khách đang gọi. Tương phản cao: #b83900, 4.58:1 trên stage-ground (viền chỉ báo trạng thái đạt 3:1)."
      },
      {
        "name": "toast-success",
        "value": {
          "kem": "#2e7d5b",
          "nau": "#2e7d5b",
          "socola": "#2e7d5b",
          "dem": "#2e7d5b",
          "hc": "#0f5c2e"
        },
        "usage": "Nền toast thành công (--success): chữ on-fill 5.0:1; Tương phản cao (#0f5c2e): 8.0:1. Bổ sung có chủ đích, game chưa có toast xanh."
      },
      {
        "name": "toast-warn",
        "value": {
          "kem": "#8a5a00",
          "nau": "#8a5a00",
          "socola": "#8a5a00",
          "dem": "#8a5a00",
          "hc": "#6e4a00"
        },
        "usage": "Nền toast lưu ý (--warn): chữ on-fill 5.9:1; Tương phản cao (#6e4a00): 7.95:1."
      },
      {
        "name": "toast-info",
        "value": {
          "kem": "#2b6cb0",
          "nau": "#2b6cb0",
          "socola": "#2b6cb0",
          "dem": "#2b6cb0",
          "hc": "#0a4691"
        },
        "usage": "Nền toast thông tin (--info): chữ on-fill 5.4:1; Tương phản cao (#0a4691): 9.14:1."
      },
      {
        "name": "toast-reward",
        "value": {
          "kem": "#7a4f00",
          "nau": "#7a4f00",
          "socola": "#7a4f00",
          "dem": "#7a4f00",
          "hc": "#5a3b00"
        },
        "usage": "Nền toast phần thưởng (--reward, +50k): chữ on-fill 7.1:1; Tương phản cao (#5a3b00): 10.2:1."
      },
      {
        "name": "timer-ok",
        "value": {
          "kem": "#15803d",
          "nau": "#15803d",
          "socola": "#15803d",
          "dem": "#15803d",
          "hc": "#0f5c2e"
        },
        "usage": "Nền đồng hồ đếm ngược còn dư giờ (.tax-timer-badge.active); chữ on-fill 5.0:1; Tương phản cao (#0f5c2e): 8.0:1."
      },
      {
        "name": "timer-soon",
        "value": {
          "kem": "#d97706",
          "nau": "#d97706",
          "socola": "#d97706",
          "dem": "#d97706",
          "hc": "#7a4300"
        },
        "usage": "Nền đồng hồ đếm ngược sắp hết hạn (.tax-timer-badge.grace); chữ on-fill chỉ 3.2:1 ở bốn theme gốc (giữ đúng màu game), nên trạng thái soon luôn kèm icon ⚠ khác trạng thái ok và chữ \"Sắp hết · mm:ss\", không chỉ dựa vào màu; Tương phản cao (#7a4300): 7.9:1."
      },
      {
        "name": "timer-overdue",
        "value": {
          "kem": "#dc2626",
          "nau": "#dc2626",
          "socola": "#dc2626",
          "dem": "#dc2626",
          "hc": "#8a1f17"
        },
        "usage": "Nền đồng hồ đếm ngược quá hạn (.tax-timer-badge.overdue); chữ on-fill 4.8:1; Tương phản cao (#8a1f17): 9.17:1."
      },
      {
        "name": "urgent-bg",
        "value": "rgba(18, 12, 10, 0.95)",
        "usage": "Nền lớp phủ cảnh báo khẩn (.police-raid-overlay), gần đen ở cả năm theme để chữ trên nó có tương phản cố định."
      },
      {
        "name": "urgent-title",
        "value": {
          "kem": "#ff5252",
          "nau": "#ff5252",
          "socola": "#ff5252",
          "dem": "#ff5252",
          "hc": "#ff8a7a"
        },
        "usage": "Chữ tiêu đề cảnh báo khẩn (.police-title) trên urgent-bg: 6.1:1; Tương phản cao (#ff8a7a): 8.5:1."
      },
      {
        "name": "urgent-sub",
        "value": "#fef08a",
        "usage": "Chữ phụ và số đếm ngược cảnh báo khẩn (.police-sub, .police-countdown-txt) trên urgent-bg: hơn 15:1."
      },
      {
        "name": "urgent-bar-from",
        "value": "#ef4444",
        "usage": "Điểm đầu gradient thanh thời gian cảnh báo khẩn (.police-timer-bar) và quầng nháy viền màn hình; trên urgent-bg hơn 4.5:1."
      },
      {
        "name": "urgent-bar-to",
        "value": "#f59e0b",
        "usage": "Điểm cuối gradient thanh thời gian cảnh báo khẩn; trên urgent-bg hơn 8:1."
      },
      {
        "name": "chip-10k-bg",
        "value": "#e0e7ff",
        "usage": "Nền chip cược 10k (BetChips, .bc-chip-10k / .xd-chip-10k). Cố định ở cả năm theme: chip là vật thể trong game."
      },
      {
        "name": "chip-10k-ink",
        "value": {
          "kem": "#3730a3",
          "nau": "#3730a3",
          "socola": "#3730a3",
          "dem": "#3730a3",
          "hc": "#2a2578"
        },
        "usage": "Chữ chip 10k trên chip-10k-bg: 8.06:1; Tương phản cao (#2a2578): 10.43:1."
      },
      {
        "name": "chip-10k-line",
        "value": {
          "kem": "#6366f1",
          "nau": "#6366f1",
          "socola": "#6366f1",
          "dem": "#6366f1",
          "hc": "#4338ca"
        },
        "usage": "Viền 2px chip 10k. Tương phản cao (#4338ca): 7.90:1 với panel, 6.41:1 với chip-10k-bg."
      },
      {
        "name": "chip-50k-bg",
        "value": "#fef3c7",
        "usage": "Nền chip cược 50k (.bc-chip-50k / .xd-chip-50k)."
      },
      {
        "name": "chip-50k-ink",
        "value": {
          "kem": "#92400e",
          "nau": "#92400e",
          "socola": "#92400e",
          "dem": "#92400e",
          "hc": "#6b2e0a"
        },
        "usage": "Chữ chip 50k trên chip-50k-bg: 6.37:1; Tương phản cao (#6b2e0a): 9.33:1."
      },
      {
        "name": "chip-50k-line",
        "value": {
          "kem": "#f59e0b",
          "nau": "#f59e0b",
          "socola": "#f59e0b",
          "dem": "#f59e0b",
          "hc": "#b45309"
        },
        "usage": "Viền 2px chip 50k. Tương phản cao (#b45309): 5.02:1 với panel, 4.51:1 với chip-50k-bg."
      },
      {
        "name": "chip-100k-bg",
        "value": "#dcfce7",
        "usage": "Nền chip cược 100k (.bc-chip-100k / .xd-chip-100k)."
      },
      {
        "name": "chip-100k-ink",
        "value": {
          "kem": "#166534",
          "nau": "#166534",
          "socola": "#166534",
          "dem": "#166534",
          "hc": "#14532d"
        },
        "usage": "Chữ chip 100k trên chip-100k-bg: 6.49:1; Tương phản cao (#14532d): 8.30:1."
      },
      {
        "name": "chip-100k-line",
        "value": {
          "kem": "#22c55e",
          "nau": "#22c55e",
          "socola": "#22c55e",
          "dem": "#22c55e",
          "hc": "#15803d"
        },
        "usage": "Viền 2px chip 100k. Tương phản cao (#15803d): 5.02:1 với panel, 4.57:1 với chip-100k-bg."
      },
      {
        "name": "chip-500k-bg",
        "value": "#ffe4e6",
        "usage": "Nền chip cược 500k (.bc-chip-500k / .xd-chip-500k)."
      },
      {
        "name": "chip-500k-ink",
        "value": {
          "kem": "#9f1239",
          "nau": "#9f1239",
          "socola": "#9f1239",
          "dem": "#9f1239",
          "hc": "#881337"
        },
        "usage": "Chữ chip 500k trên chip-500k-bg: 6.68:1; Tương phản cao (#881337): 7.97:1."
      },
      {
        "name": "chip-500k-line",
        "value": {
          "kem": "#f43f5e",
          "nau": "#f43f5e",
          "socola": "#f43f5e",
          "dem": "#f43f5e",
          "hc": "#be123c"
        },
        "usage": "Viền 2px chip 500k. Tương phản cao (#be123c): 6.29:1 với panel, 5.24:1 với chip-500k-bg."
      },
      {
        "name": "chip-1m-bg",
        "value": "#fef08a",
        "usage": "Nền chip cược 1tr (.bc-chip-1m / .xd-chip-1m)."
      },
      {
        "name": "chip-1m-ink",
        "value": {
          "kem": "#854d0e",
          "nau": "#854d0e",
          "socola": "#854d0e",
          "dem": "#854d0e",
          "hc": "#5f340a"
        },
        "usage": "Chữ chip 1tr trên chip-1m-bg: 5.89:1; Tương phản cao (#5f340a): 9.10:1."
      },
      {
        "name": "chip-1m-line",
        "value": {
          "kem": "#eab308",
          "nau": "#eab308",
          "socola": "#eab308",
          "dem": "#eab308",
          "hc": "#a16207"
        },
        "usage": "Viền 2px chip 1tr. Tương phản cao (#a16207): 4.92:1 với panel, 4.23:1 với chip-1m-bg."
      },
      {
        "name": "chip-all-bg",
        "value": "#fbcfe8",
        "usage": "Nền chip Tất tay (.bc-chip-all / .xd-chip-all)."
      },
      {
        "name": "chip-all-ink",
        "value": {
          "kem": "#831843",
          "nau": "#831843",
          "socola": "#831843",
          "dem": "#831843",
          "hc": "#6b0f3a"
        },
        "usage": "Chữ chip Tất tay trên chip-all-bg: 6.98:1; Tương phản cao (#6b0f3a): 8.66:1."
      },
      {
        "name": "chip-all-line",
        "value": {
          "kem": "#ec4899",
          "nau": "#ec4899",
          "socola": "#ec4899",
          "dem": "#ec4899",
          "hc": "#be185d"
        },
        "usage": "Viền chip Tất tay. Tương phản cao (#be185d): 6.04:1 với panel, 4.37:1 với chip-all-bg."
      },
      {
        "name": "felt-hi",
        "value": {
          "kem": "#24523b",
          "nau": "#24523b",
          "socola": "#24523b",
          "dem": "#24523b",
          "hc": "#173a29"
        },
        "usage": "Tâm sáng của nền nỉ xanh thanh ví minigame (.bc-wallet-bar, .xd-wallet-bar: radial-gradient). Tối ở cả năm theme nên chữ vàng trên nó có tương phản ổn định. Tương phản cao: #173a29, điểm dừng sáng nhất của gradient để số tiền felt-money đạt 7.52:1 (bốn theme gốc #24523b: 5.36:1, giữ đúng game)."
      },
      {
        "name": "felt-mid",
        "value": "#133022",
        "usage": "Điểm 70% của gradient nền nỉ xanh thanh ví minigame."
      },
      {
        "name": "felt-lo",
        "value": "#0c2016",
        "usage": "Rìa tối của gradient nền nỉ xanh thanh ví minigame."
      },
      {
        "name": "felt-line",
        "value": "#d4af37",
        "usage": "Viền 2px vàng đồng của thanh ví minigame; trên felt-lo hơn 7:1."
      },
      {
        "name": "felt-ink",
        "value": "#f7d56b",
        "usage": "Chữ nhãn trên thanh ví minigame (Két tiền quán:) trên felt-mid: hơn 9:1; trên felt-hi của Tương phản cao 8.77:1."
      },
      {
        "name": "felt-money",
        "value": "#fbbf24",
        "usage": "Số tiền két lớn trên thanh ví minigame (.bc-money, .xd-money) trên felt-mid: hơn 8:1."
      },
      {
        "name": "felt-bet",
        "value": "#fed7aa",
        "usage": "Tổng cược trên thanh ví minigame (.bc-bet-total) trên felt-mid: hơn 10:1."
      },
      {
        "name": "plate-hi",
        "value": "#e6f3fa",
        "usage": "Tâm đĩa xóc (.bc-plate: radial-gradient 40%). Đĩa sứ xanh nhạt, vật thể trong game nên cố định."
      },
      {
        "name": "plate-mid",
        "value": "#c4e1ed",
        "usage": "Điểm 70% của gradient đĩa xóc."
      },
      {
        "name": "plate-lo",
        "value": "#9bc7db",
        "usage": "Rìa ngoài của gradient đĩa xóc."
      },
      {
        "name": "plate-line",
        "value": {
          "kem": "#8ab8ce",
          "nau": "#8ab8ce",
          "socola": "#8ab8ce",
          "dem": "#8ab8ce",
          "hc": "#3d6f8a"
        },
        "usage": "Viền 4px của đĩa xóc. Tương phản cao (#3d6f8a): 5.4:1 với panel."
      },
      {
        "name": "die-face",
        "value": "#ffffff",
        "usage": "Mặt viên xúc xắc linh vật (.bc-die) và nền ô linh vật (.bc-tile): trắng cố định để tranh chibi luôn nằm trên nền sáng, kể cả theme Đêm dịu."
      },
      {
        "name": "tile-line",
        "value": {
          "kem": "#ead7bd",
          "nau": "#ead7bd",
          "socola": "#ead7bd",
          "dem": "#ead7bd",
          "hc": "#806250"
        },
        "usage": "Viền 2px ô linh vật Bầu Cua (.bc-tile). Tương phản cao: #806250 (= line), 5.5:1 với die-face."
      },
      {
        "name": "tile-win",
        "value": "#fef9c3",
        "usage": "Nền ô linh vật trúng sau khi mở bát (.bc-tile.winner). Chữ stage-ink trên nó hơn 9:1."
      },
      {
        "name": "card-den-bg",
        "value": "#fff6ef",
        "usage": "Nền lá bài Trân Châu Đen (SUITS tc_den bg #fff6ef). Cố định ở cả năm theme vì lá bài là vật thể, kể cả theme Đêm dịu."
      },
      {
        "name": "card-den-ink",
        "value": "#451a03",
        "usage": "Chữ và biểu tượng lá Trân Châu Đen (.xd-card.tc-den: #451a03) trên card-den-bg: hơn 15:1."
      },
      {
        "name": "card-den-line",
        "value": {
          "kem": "#d6bc9f",
          "nau": "#d6bc9f",
          "socola": "#d6bc9f",
          "dem": "#d6bc9f",
          "hc": "#806250"
        },
        "usage": "Viền 1px lá Trân Châu Đen (#d6bc9f). Tương phản cao: #806250, 5.5:1 với card-den-bg và panel để lá tách khỏi nền trắng."
      },
      {
        "name": "card-vang-bg",
        "value": "#fffbeb",
        "usage": "Nền lá Trân Châu Hoàng Kim (SUITS tc_vang bg #fffbeb)."
      },
      {
        "name": "card-vang-ink",
        "value": {
          "kem": "#b45309",
          "nau": "#b45309",
          "socola": "#b45309",
          "dem": "#b45309",
          "hc": "#7c3f00"
        },
        "usage": "Chữ lá Hoàng Kim (#b45309) trên card-vang-bg: 4.8:1. Tương phản cao (#7c3f00): hơn 8:1."
      },
      {
        "name": "card-vang-line",
        "value": {
          "kem": "#fde047",
          "nau": "#fde047",
          "socola": "#fde047",
          "dem": "#fde047",
          "hc": "#8a6a00"
        },
        "usage": "Viền 1px lá Hoàng Kim (#fde047). Tương phản cao: #8a6a00, hơn 4.5:1 với card-vang-bg và panel."
      },
      {
        "name": "card-trang-bg",
        "value": "#f0f9ff",
        "usage": "Nền lá Trân Châu Trắng 3Q (SUITS tc_trang bg #f0f9ff)."
      },
      {
        "name": "card-trang-ink",
        "value": {
          "kem": "#0369a1",
          "nau": "#0369a1",
          "socola": "#0369a1",
          "dem": "#0369a1",
          "hc": "#0c4a6e"
        },
        "usage": "Chữ lá Trắng 3Q (#0369a1) trên card-trang-bg: 5.7:1. Tương phản cao (#0c4a6e): hơn 9:1."
      },
      {
        "name": "card-trang-line",
        "value": {
          "kem": "#bae6fd",
          "nau": "#bae6fd",
          "socola": "#bae6fd",
          "dem": "#bae6fd",
          "hc": "#0369a1"
        },
        "usage": "Viền 1px lá Trắng 3Q (#bae6fd). Tương phản cao: #0369a1, hơn 5:1 với card-trang-bg và panel."
      },
      {
        "name": "card-dau-bg",
        "value": "#fff1f2",
        "usage": "Nền lá Trân Châu Dâu Tây (SUITS tc_dau bg #fff1f2)."
      },
      {
        "name": "card-dau-ink",
        "value": {
          "kem": "#e11d48",
          "nau": "#e11d48",
          "socola": "#e11d48",
          "dem": "#e11d48",
          "hc": "#9f1239"
        },
        "usage": "Chữ lá Dâu Tây (#e11d48) trên card-dau-bg: 4.4:1. Tương phản cao (#9f1239): hơn 8:1."
      },
      {
        "name": "card-dau-line",
        "value": {
          "kem": "#fecdd3",
          "nau": "#fecdd3",
          "socola": "#fecdd3",
          "dem": "#fecdd3",
          "hc": "#be123c"
        },
        "usage": "Viền 1px lá Dâu Tây (#fecdd3). Tương phản cao: #be123c, hơn 5:1 với card-dau-bg và panel."
      },
      {
        "name": "cardback-hi",
        "value": "#78350f",
        "usage": "Đầu sáng của gradient 135° lưng lá bài úp (.xd-card.face-down)."
      },
      {
        "name": "cardback-lo",
        "value": "#451a03",
        "usage": "Đầu tối của gradient lưng lá bài úp."
      },
      {
        "name": "cardback-line",
        "value": {
          "kem": "#d97706",
          "nau": "#d97706",
          "socola": "#d97706",
          "dem": "#d97706",
          "hc": "#b45309"
        },
        "usage": "Viền 1.5px lưng lá bài úp (.xd-card.face-down: #d97706). Tương phản cao: #b45309, 5.0:1 với panel."
      }
    ]
  },
  "type": {
    "fonts": [],
    "families": {
      "sans": "\"Baloo 2\", system-ui, -apple-system, \"Segoe UI\", sans-serif"
    },
    "groups": [
      {
        "name": "Tiêu đề",
        "family": "sans",
        "styles": [
          {
            "name": "display",
            "fontSize": "2rem",
            "lineHeight": 1.05,
            "fontWeight": 800,
            "usage": "Tiêu đề lớn trong modal (tổng kết ngày, lên level).",
            "sample": "Tổng kết ngày 2"
          },
          {
            "name": "title",
            "fontSize": "1.45rem",
            "lineHeight": 1.2,
            "fontWeight": 700,
            "usage": "Tiêu đề card modal (h2).",
            "sample": "Cài đặt quán"
          },
          {
            "name": "board-title",
            "fontSize": "1.35rem",
            "lineHeight": 1.2,
            "fontWeight": 800,
            "usage": "Tiêu đề bảng phấn, giãn chữ .5px.",
            "sample": "Menu hôm nay",
            "letterSpacing": "0.5px"
          },
          {
            "name": "money",
            "fontSize": "1.3rem",
            "lineHeight": 1.1,
            "fontWeight": 800,
            "usage": "Số tiền két trên HUD.",
            "sample": "237,5k"
          },
          {
            "name": "stat",
            "fontSize": "2.4rem",
            "lineHeight": 1,
            "fontWeight": 800,
            "usage": "Số lớn: điểm đánh giá trung bình.",
            "sample": "4,6"
          }
        ]
      },
      {
        "name": "Văn bản",
        "family": "sans",
        "styles": [
          {
            "name": "section",
            "fontSize": "1rem",
            "lineHeight": 1.25,
            "fontWeight": 800,
            "usage": "Tiêu đề nhóm trong pane (.sec).",
            "sample": "Topping"
          },
          {
            "name": "item-name",
            "fontSize": "1rem",
            "lineHeight": 1.15,
            "fontWeight": 700,
            "usage": "Tên món, tên nhân viên trong hàng danh sách.",
            "sample": "Trân châu đen"
          },
          {
            "name": "body",
            "fontSize": "0.92rem",
            "lineHeight": 1.4,
            "fontWeight": 500,
            "usage": "Văn bản thường, dòng món trên bảng phấn, lời trong modal.",
            "sample": "Khách tò mò ghé quán nhiều hơn hôm nay."
          },
          {
            "name": "note",
            "fontSize": "0.82rem",
            "lineHeight": 1.35,
            "fontWeight": 500,
            "usage": "Ghi chú màu soft dưới tiêu đề nhóm.",
            "sample": "Nhập theo mẻ, hàng cũ xuất trước."
          },
          {
            "name": "sub",
            "fontSize": "0.78rem",
            "lineHeight": 1.2,
            "fontWeight": 500,
            "usage": "Dòng phụ dưới tên (tồn kho, giá nhập), chữ nhỏ trên HUD.",
            "sample": "10 · 4,5k"
          }
        ]
      },
      {
        "name": "Điều khiển",
        "family": "sans",
        "styles": [
          {
            "name": "button-lg",
            "fontSize": "1.1rem",
            "lineHeight": 1.2,
            "fontWeight": 800,
            "usage": "Nút chính lớn (Mở cửa ngày 2).",
            "sample": "Mở cửa ngày 2"
          },
          {
            "name": "button",
            "fontSize": "0.9rem",
            "lineHeight": 1.2,
            "fontWeight": 700,
            "usage": "Tab, nút trung bình.",
            "sample": "Nâng cấp"
          },
          {
            "name": "button-sm",
            "fontSize": "0.78rem",
            "lineHeight": 1.1,
            "fontWeight": 700,
            "usage": "Nút nhỏ, chip.",
            "sample": "Nhập 10"
          },
          {
            "name": "label",
            "fontSize": "0.72rem",
            "lineHeight": 1.2,
            "fontWeight": 800,
            "usage": "Nhãn nhóm control, tiêu đề cột bảng.",
            "sample": "ĐÁ"
          },
          {
            "name": "badge",
            "fontSize": "0.7rem",
            "lineHeight": 1.3,
            "fontWeight": 700,
            "usage": "Tag, pill.",
            "sample": "Mới"
          },
          {
            "name": "micro",
            "fontSize": "0.66rem",
            "lineHeight": 1.2,
            "fontWeight": 700,
            "usage": "Nhãn hạn dùng, chữ dưới icon thẻ khách.",
            "sample": "1 ngày"
          }
        ]
      },
      {
        "name": "Sân khấu 768px",
        "family": "sans",
        "styles": [
          {
            "name": "stage-title",
            "fontSize": "72px",
            "lineHeight": 1,
            "fontWeight": 800,
            "usage": "Tên game trên splash (px của sân khấu 768×1376, được scale theo màn hình).",
            "sample": "Tiệm Trà Mơ Ước",
            "letterSpacing": "0.01em"
          },
          {
            "name": "stage-say",
            "fontSize": "24px",
            "lineHeight": 1.18,
            "fontWeight": 600,
            "usage": "Lời khách trong bong bóng ở quầy.",
            "sample": "Cho mình 1 ly trà sữa size L nha"
          },
          {
            "name": "stage-tag",
            "fontSize": "19px",
            "lineHeight": 1,
            "fontWeight": 800,
            "usage": "Nhãn đặt trên tranh (QUẦY TRÀ, PHA LY), nội dung coachmark.",
            "sample": "QUẦY TRÀ"
          },
          {
            "name": "stage-badge",
            "fontSize": "16px",
            "lineHeight": 1,
            "fontWeight": 800,
            "usage": "Số lượng trên badge khay và nhãn hũ trà.",
            "sample": "10"
          }
        ]
      }
    ]
  },
  "spacing": {
    "tokens": [
      {
        "name": "space-2",
        "value": "2px",
        "usage": "Khoảng dọc giữa các dòng món trên bảng phấn; khe nhỏ nhất."
      },
      {
        "name": "space-4",
        "value": "4px",
        "usage": "Khe giữa các nút trong một nhóm (btns, tabs, seg, pctl); padding dọc của nút nhỏ."
      },
      {
        "name": "space-6",
        "value": "6px",
        "usage": "Khe ô KPI, chip lọc, dòng thẻ khách; padding ô KPI."
      },
      {
        "name": "space-8",
        "value": "8px",
        "usage": "Khe trong header HUD, pager, nút trong hộp hỏi; padding dọc của hàng danh sách."
      },
      {
        "name": "space-10",
        "value": "10px",
        "usage": "Khe cột của hàng danh sách; padding dọc của callout, nút setb."
      },
      {
        "name": "space-12",
        "value": "12px",
        "usage": "Lề ngang của mọi khối trên màn chuẩn bị (board, tabs, pane); padding của pane và modal scrim."
      },
      {
        "name": "space-14",
        "value": "14px",
        "usage": "Padding ngang của header, bảng phấn, nút setb."
      },
      {
        "name": "space-16",
        "value": "16px",
        "usage": "Padding ngang của card modal; khe cột của bảng phấn."
      },
      {
        "name": "space-22",
        "value": "22px",
        "usage": "Padding ngang của toast."
      },
      {
        "name": "space-26",
        "value": "26px",
        "usage": "Padding ngang của nút chính lớn."
      },
      {
        "name": "space-openbar",
        "value": "90px",
        "usage": "Khoảng chừa dưới pane để thanh nút Mở cửa cố định không che nội dung."
      }
    ]
  },
  "radius": {
    "tokens": [
      {
        "name": "radius-3",
        "value": "3px",
        "usage": "Thanh tiến độ mảnh 5–6px (mục tiêu, kiên nhẫn)."
      },
      {
        "name": "radius-6",
        "value": "6px",
        "usage": "Tag, nhãn hạn dùng, nhãn Hết."
      },
      {
        "name": "radius-8",
        "value": "8px",
        "usage": "Ô số của stepper, ô icon trong thẻ khách, hộp cảnh báo."
      },
      {
        "name": "radius-10",
        "value": "10px",
        "usage": "Nút nhỏ, chip, ô nhập giá, ô KPI, bảng phấn, hộp dự báo."
      },
      {
        "name": "radius-12",
        "value": "12px",
        "usage": "Nút pager, nút viền nguy hiểm, ô nhập mã, góc trên của tab, callout."
      },
      {
        "name": "radius-14",
        "value": "14px",
        "usage": "Card mục tiêu, thẻ khách, nút setb, ô chọn theme, biển tên quán."
      },
      {
        "name": "radius-16",
        "value": "16px",
        "usage": "Nút chính lớn, dải tab (góc trên), pane (góc dưới), khối panel ở quầy."
      },
      {
        "name": "radius-20",
        "value": "20px",
        "usage": "Card modal, khung tính tiền."
      },
      {
        "name": "radius-24",
        "value": "24px",
        "usage": "Toast, thanh loading splash."
      },
      {
        "name": "radius-round",
        "value": "50%",
        "usage": "Nút tròn HUD, mặt khách, avatar."
      },
      {
        "name": "radius-pill",
        "value": "999px",
        "usage": "Badge số đếm, pill trạng thái."
      }
    ]
  },
  "shadow": {
    "note": "Bóng phẳng kiểu đồ chơi gỗ: lệch dọc, không nhoè, là chủ đạo. Bóng nhoè chỉ dành cho lớp nổi (modal, toast).",
    "tokens": [
      {
        "name": "shadow-press",
        "value": {
          "kem": "0 4px 0 #c24c69",
          "nau": "0 4px 0 #6b3f22",
          "socola": "0 4px 0 #4a2a14",
          "dem": "0 4px 0 #b85f80",
          "hc": "0 4px 0 #6d0a28"
        },
        "usage": "Cạnh nổi 3D của nút chính (pink-d; Tương phản cao #6d0a28, 12.18:1 trên panel). Khi nhấn: shadow-press-down và dịch xuống 3px."
      },
      {
        "name": "shadow-press-down",
        "value": {
          "kem": "0 1px 0 #c24c69",
          "nau": "0 1px 0 #6b3f22",
          "socola": "0 1px 0 #4a2a14",
          "dem": "0 1px 0 #b85f80",
          "hc": "0 1px 0 #6d0a28"
        },
        "usage": "Nút chính lúc đang nhấn."
      },
      {
        "name": "shadow-ring-pink",
        "value": {
          "kem": "0 0 0 2px #ef6f8e",
          "nau": "0 0 0 2px #9a6340",
          "socola": "0 0 0 2px #6b3f22",
          "dem": "0 0 0 2px #f08fb0",
          "hc": "0 0 0 2px #a3123c"
        },
        "usage": "Viền đôi của lựa chọn đang bật (ô chọn theme, thẻ được chọn). Tương phản cao: pink #a3123c, 7.75:1 trên panel."
      },
      {
        "name": "shadow-tab-on",
        "value": {
          "kem": "none",
          "nau": "none",
          "socola": "none",
          "dem": "none",
          "hc": "inset 0 3px 0 #a3123c"
        },
        "usage": "Vạch nhấn trên đầu tab đang chọn. Bốn theme gốc: không có (tab đang chọn nổi nhờ nền panel). Tương phản cao: vạch pink #a3123c 3px, 7.75:1 trên panel, để trạng thái chọn không chỉ dựa vào sắc độ."
      },
      {
        "name": "shadow-edge",
        "value": {
          "kem": "none",
          "nau": "none",
          "socola": "none",
          "dem": "none",
          "hc": "inset 0 0 0 2px #806250"
        },
        "usage": "Viền trong 2px cho bề mặt hoặc chỉ báo chỉ khác nền cha bằng sắc độ: bong bóng lời khách, hàng lọc đang bật (tóm tắt đánh giá). Bốn theme gốc: không có (giữ đúng game). Tương phản cao: line #806250, 5.35:1 trên bg, 5.55:1 trên panel."
      },
      {
        "name": "shadow-edge-top",
        "value": {
          "kem": "none",
          "nau": "none",
          "socola": "none",
          "dem": "none",
          "hc": "inset 0 2px 0 #806250, inset 2px 0 0 #806250, inset -2px 0 0 #806250"
        },
        "usage": "Như shadow-edge nhưng hở cạnh dưới, cho dải tab (đáy dải nối liền với pane). Tương phản cao: line #806250."
      },
      {
        "name": "shadow-edge-bottom",
        "value": {
          "kem": "none",
          "nau": "none",
          "socola": "none",
          "dem": "none",
          "hc": "inset 2px 0 0 #806250, inset -2px 0 0 #806250, inset 0 -2px 0 #806250"
        },
        "usage": "Như shadow-edge nhưng hở cạnh trên, cho pane của tab (đỉnh pane nối liền với tab đang chọn). Tương phản cao: line #806250."
      },
      {
        "name": "shadow-on",
        "value": {
          "kem": "none",
          "nau": "none",
          "socola": "none",
          "dem": "none",
          "hc": "inset 0 0 0 2px #a3123c"
        },
        "usage": "Vòng trong 2px cho lựa chọn đang bật của chip và ô chọn cỡ ly; cộng với viền pink 2px thành dải pink dày 4px. Bốn theme gốc: không có (giữ đúng game). Tương phản cao: pink #a3123c, 7.75:1 trên panel, để trạng thái chọn không chỉ dựa vào sắc độ nền."
      },
      {
        "name": "shadow-fill-edge",
        "value": {
          "kem": "none",
          "nau": "none",
          "socola": "none",
          "dem": "none",
          "hc": "inset -3px 0 0 #fffaf0"
        },
        "usage": "Cạnh sáng 3px ở mép phải phần đã tải của thanh loading splash. Bốn theme gốc: không có. Tương phản cao: #fffaf0 (= stage-paper), 17.69:1 với stage-fill và 9.03:1 với stage-track, để phần đã tải tách khỏi rãnh."
      },
      {
        "name": "shadow-sign",
        "value": "0 3px 0 rgba(0, 0, 0, 0.12)",
        "usage": "Bóng đổ phẳng của biển tên quán."
      },
      {
        "name": "shadow-board",
        "value": "0 4px 0 rgba(0, 0, 0, 0.12)",
        "usage": "Bóng đổ phẳng của bảng phấn."
      },
      {
        "name": "shadow-modal",
        "value": "0 16px 40px rgba(0, 0, 0, 0.35)",
        "usage": "Card modal nổi trên scrim."
      },
      {
        "name": "shadow-toast",
        "value": "0 6px 22px rgba(0, 0, 0, 0.35)",
        "usage": "Toast."
      },
      {
        "name": "shadow-street",
        "value": "0 2px 8px rgba(234, 88, 12, 0.35)",
        "usage": "Quầng cam của nút Xuống Phố."
      },
      {
        "name": "shadow-coach",
        "value": {
          "kem": "0 4px 0 #2f6c9c",
          "nau": "0 4px 0 #2f6c9c",
          "socola": "0 4px 0 #2f6c9c",
          "dem": "0 4px 0 #2f6c9c",
          "hc": "0 4px 0 #0b2f4f"
        },
        "usage": "Cạnh 3D của coachmark (coach-d; Tương phản cao #0b2f4f)."
      },
      {
        "name": "shadow-want",
        "value": {
          "kem": "0 0 0 3px #ffffff, 0 0 0 6px #ff6a00",
          "nau": "0 0 0 3px #ffffff, 0 0 0 6px #ff6a00",
          "socola": "0 0 0 3px #ffffff, 0 0 0 6px #ff6a00",
          "dem": "0 0 0 3px #ffffff, 0 0 0 6px #ff6a00",
          "hc": "0 0 0 3px #ffffff, 0 0 0 6px #b83900"
        },
        "usage": "Khay khách đang gọi: viền trắng 3px rồi cam 3px, kèm nhịp phóng 1.04. Tương phản cao: vòng ngoài #b83900, 4.58:1 trên stage-ground (chỉ báo trạng thái cần 3:1)."
      },
      {
        "name": "shadow-pick",
        "value": {
          "kem": "0 0 0 4px #5aae86",
          "nau": "0 0 0 4px #5aae86",
          "socola": "0 0 0 4px #5aae86",
          "dem": "0 0 0 4px #5aae86",
          "hc": "0 0 0 4px #1f7a4f"
        },
        "usage": "Khay đã được chọn cho ly đang pha (target; Tương phản cao #1f7a4f)."
      }
    ]
  },
  "meta": {
    "source": "code",
    "repo": "TiemTraMoUoc/game",
    "ref": "v12.47.144@c8c10b2",
    "paths": {
      "tokens": [
        "css/style.css",
        "js/game.js (THEMES)"
      ],
      "assets": [
        "img/"
      ]
    },
    "synced": "2026-10-01"
  }
}