/* shared/tokens.css — design token canonical (AD-5, Story 1.1; palette v5 "light 60-30-10" 2026-08-26 — Epic 14, sprint-change-proposal-live-translate-v3- light-theme-2026-08-26.md, Sếp duyệt đảo dark→light sau phản hồi trên thiết bị thật "vẫn dark mode, không follow brand color"). Đổi so với v4: nền/panel/ muted/border/text đảo từ blue-slate Indigo TỐI sang cùng thang màu Neutral Blue-Slate NHẠT + Indigo đậm cho chữ — đúng quy tắc 60-30-10 (knowledge-base/design/ane-brand-color-system/README.md: 60% neutral SÁNG). Cặp --text trên --bg đo lại bằng tests/test_epic9_screen_contrast.py (khoá sàn AAA 7:1 — đổi giá trị phải giữ format `--bg: #rrggbb;` cho test parse). Light background = đánh đổi CÓ Ý THỨC Sếp chấp nhận cho NFR-4 (đọc xa hội trường tối) — xem PRD live-translate-v3 NFR-4 + sprint-change 2026-08-26 mục 5. File này CHỈ chứa token (custom property) — KHÔNG @import font, KHÔNG class cụ thể (AD-2: shared/ là plumbing thuần, mọi màn link/@import nó). */ :root { color-scheme: light; --bg: #f8f9fc; /* v5: Neutral-50 (Neutral Blue-Slate scale) */ --panel: #f1f3f8; /* v5: Neutral-100 */ --panel-2: #e2e5ef; /* v5: Neutral-200 — bề mặt nổi hơn panel 1 nấc — card active/hero. Phân tầng bằng tông nền (DESIGN.md Elevation), không phải shadow. */ --text: #1a2140; /* v5: ANE Indigo-900 — chữ chính trên nền sáng */ --muted: #525c82; /* v5: Neutral-700 — chữ phụ, AA 4.5:1 trên --bg */ --ane-500: #415097; /* Indigo — chrome/structure: header, focus rings, lang bar */ --ane-300: #394787; /* v5: đảo vai trò — ANE Indigo-700, bậc TỐI của Indigo dùng cho chữ/icon TRÊN NỀN SÁNG (v4 dùng bậc sáng cho nền tối, nay ngược lại). Cùng hue, không phải màu mới (tiền lệ --ane-500-tint: DESIGN.md cấm HUE mới, không cấm bậc sáng/tối của hue đã có). */ --ane-action-500: #f27131; /* Orange — CTA: "start this" invitation (Start, PIN submit) */ --danger: #ef4444; /* Recording-active safety signal (Stop button + live dot) — intentionally NOT brand orange: universal red = "recording, handle with care" beats brand consistency for a safety cue. Sprint-change 2026-08-23: khớp --error-500 canonical (knowledge-base/design/ane-brand-color-system/README.md) — giá trị cũ #f85149 là GitHub Primer red nguyên văn, sót lại từ trước cả 2 lần redesign, chưa từng khớp brand ANE. ⚠️ 2026-08-27: số "5,07:1" ghi ở đây trước kia là contrast trên nền TỐI (palette v4, trước Epic 14) — ĐÃ LỖI THỜI. Trên --bg SÁNG v5 (#f8f9fc) tỉ số thật là 3,57:1. Token này chỉ dùng làm NỀN của chỉ báo đồ hoạ nhỏ (.live-dot, .status-dot.is-lost, .ask-ptt.recording) và border-color — không chỗ nào là `color:` — nên sàn ĐÚNG là WCAG SC 1.4.11 non-text 3:1, và 3,57:1 đạt TRÊN `--bg`. ⚠️ Chỉ trên `--bg`: `--panel` 3,39:1 (đạt), `--panel-2` 2,99:1 (TRƯỢT sát nút) — test mới chỉ khoá cặp với `--bg` (tests/test_epic9_screen_contrast.py), phủ nốt 2 bề mặt kia gộp vào cùng lần Sếp duyệt màu --success. Icon PHỦ LÊN nền --danger (`.ask-ptt.recording`) là icon-only, nhãn chữ nằm ở anh em bên ngoài → sàn áp dụng cũng là 3:1 và trắng trên #ef4444 = 3,76:1, ĐẠT. */ --ane-500-tint: rgba(91, 108, 199, 0.14); /* Digest panel / khối indigo nhạt — low-alpha Indigo (nới sáng theo palette v4), DESIGN.md bans a 3rd accent hue, so this is a tint of --ane-500, not a new color. */ --border: #c8cde0; /* DESIGN.md — promoted to token in v2; v5: Neutral-300. */ --danger-wash: rgba(239, 68, 68, 0.18); /* Epic 4 — wash của --danger, phủ toàn màn standby-screen khi nguồn tiếng chết. Sprint-change 2026-08-23: re-derive từ --danger mới (#ef4444 = rgb(239,68,68)), giữ alpha. */ --success: #047857; /* Proof-of-life "đang nhận tiếng" (DESIGN.md Colors table). Sprint-change 2026-08-23 khớp brand canonical (success-500 #10b981, thay GitHub Primer #3fb950); 2026-08-27 (Sếp duyệt): đảo tiếp sang success-700 #047857 — cùng hue trong bảng brand (knowledge-base/design/ane-brand-color-system/README.md), KHÔNG phải màu mới. Lý do: Epic 14 đảo nền dark→light có đảo --ane-300 sang bậc TỐI nhưng bỏ sót --success — #10b981 trên --bg SÁNG v5 (#f8f9fc) chỉ đạt 2,41:1, TRƯỢT sàn non-text 3:1 (WCAG SC 1.4.11). success-700 đo 5,21:1, ĐẠT. Khoá bằng floor thật trong tests/test_epic9_screen_contrast.py (test_success_on_bg_meets_wcag_non_text_contrast — hết xfail). */ /* ==== Ive audit 2026-09-07 (Lô B) — token HỆ THỐNG, không phải màu/số mới. Chẩn đoán: app được nghĩ cẩn thận nhưng ghép từ nhiều bàn tay — nút cam chính có 3 bán kính (10/14/999), style.css 17 cỡ chữ bước 0,05rem, hai hổ phách cho cùng một nghĩa, nhịp khoảng cách không có đơn vị gốc. Sau đợt này không ai còn phải CHỌN bán kính/cỡ chữ nữa — chỉ chọn VAI TRÒ. Khoá bằng tests/js/design_tokens_css.test.mjs (grep literal về 0). */ /* IV9 — hai token màu còn thiếu. `--warn`: MỘT hổ phách cho nghĩa "đang nối / sự cố mềm" (trước có #e3b341 ở status-dot/owner và #f2a63b ở screen.css — cùng nghĩa, hai màu). `--warn-wash`: wash 8% của --warn, mirror cách --danger-wash làm (không hue mới). `--scrim`: MỘT màn che cho mọi overlay/sheet (trước có rgba(0,0,0,.35) và rgba(26,33,64,.55)) — derive từ --text Indigo-900, cùng quy tắc --ane-500-tint. */ --warn: #e3b341; /* [hội đồng 2026-09-07] `--warn` là màu của CHẤM/GLYPH trên nền tối (screen, status-dot) — đo 8,08:1 trên --bg-dark, tốt. Nhưng dùng chính nó làm VIỀN trên nền sáng chỉ được 1,85:1, dưới sàn non-text 3:1 (WCAG 1.4.11) → viền gần như vô hình. `--warn-line` là bậc đậm CÙNG HỌ hổ phách dành cho nét/ viền trên nền sáng (4,68:1) — mirror đúng cách `--success` đã đảo sang bậc 700 hồi 2026-08-27 vì cùng lý do. Trong dark, nền tối lật lại nên trả về `--warn` (3,19:1 của bậc đậm vẫn đạt nhưng mờ hơn hẳn 8,08:1). */ --warn-line: #a16207; --warn-wash: rgba(227, 179, 65, 0.08); --scrim: rgba(26, 33, 64, 0.55); /* IV4 — token hình dạng. control = nút/ô nhập/select; card = thẻ/banner/ panel/hộp thoại. Hai giá trị bằng nhau HÔM NAY nhưng tách vai để đổi một bên sau này không kéo bên kia. pill CHỈ cho hai "vật" (.start-hero, thanh proof-of-life) — nút-đồ-vật, không phải nút-điều-khiển; mọi nút cam/phụ khác dùng --radius-control. Vòng tròn (50%) không phải token. */ --radius-control: 12px; --radius-card: 12px; --radius-pill: 999px; /* IV5 — thang chữ 6 bậc, SÀN 12px (tự xoá S14: 58 chỗ chữ <12px trong measure.json 06/09). Map: 0,66–0,78rem→xs · 0,8–0,9→sm · 0,95–1,05→base · 1,1–1,15→md · 1,25–1,4→lg · 1,7→xl. Display (standby timer, PIN, màn chiếu) giữ clamp(); phụ đề listener giữ calc()×--listen-font-scale (A−/A+, test-lock). Chữ xs chỉ xứng đáng tồn tại khi là NHÃN, không bao giờ là CÂU (.ask-entry-sub là câu → sm). Đơn vị px có chủ ý: app tự có A−/A+ cho bề mặt đọc lâu, còn nhãn/nút cần cỡ ổn định trên iPad đoàn EU. */ --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 22px; --fs-xl: 28px; /* IV6 — lưới 4px. Quy đổi đã áp: 11→12, 13→12, 7→8, 3→4, 9→8, 18→16, 22→24, 26→24, 28→24. Quy tắc một dòng: con đầu tiên sau toolbar luôn cách --sp-3; gutter ngang mọi khối mobile là --sp-3. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; }