/* GĐ2 (docs/BAO-CAO-CHUAN-HOA-UI-TOKEN-2026-09-18.md §6): toàn bộ CSS cũ nằm trong layer legacy, giữ nguyên thứ tự nạp nên thứ tự thắng giữa các file không đổi. CSS chuẩn mới đặt ở layer cao hơn. */ @layer legacy, tokens, theme, base, layout, components, modules, states, utilities, overrides; @layer legacy { /* ===================================================================== UI THEME CORE — bảng token màu/độ tương phản dùng chung cho MỌI cửa sổ của app (AntiTask + AntiNote). File này là phần CẮT NGUYÊN XI ra khỏi styles.css (không sửa một giá trị nào). Lý do tách: AntiNote là renderer độc lập, chỉ nạp ui-*.css chứ không nạp styles.css 15k dòng — nhưng vẫn phải dùng đúng --sf-* / --ux-* để màu chữ/viền/nền khớp AntiTask. THỨ TỰ NẠP BẮT BUỘC: file này phải đứng TRƯỚC styles.css (index.html) và trước ui-satellite.css (antiNote.html). Giữ nguyên thứ tự hai khối bên dưới: khối "Unified shell" GHI ĐÈ khối "Design system tokens" vì đứng sau — đảo thứ tự là đổi màu toàn app. KHÔNG di chuyển khối MATERIAL (--a-shell/--a-header/--a-content, --scrim-a, --t, --glass-*) vào đây: tests/uiDesignSystem.test.js đọc thẳng styles.css để kiểm biên độ 4 bậc độ đục. ===================================================================== */ /* ===================================================================== FOUNDATION TOKENS GĐ5 removes Fluent/Glass as a geometry axis. Radius and spacing now come from one canonical DTCG scale; transparency and blur remain material roles. Tone colours and the "ink" used for strokes/text-shadow depend on mode. Không có --sf-font ở đây. Cả 4 block từng khai báo nó nhưng không chỗ nào đọc — font thật luôn đến từ --app-font trên :root, là giá trị người dùng chọn ở Settings > Giao diện. Giữ token chết đó chỉ tạo ảo giác rằng đổi Fluent/Liquid Glass sẽ đổi font. Một nguồn sự thật: --app-font. ===================================================================== */ html[data-mode="light"] { --sf-radius-win: 0px; --sf-radius-card: var(--dt-dimension-radius-panel); --sf-radius-row: var(--dt-dimension-radius-control); --sf-radius-chip: var(--dt-dimension-radius-control); --sf-radius-pill: var(--dt-dimension-radius-full); --sf-pad-card: var(--dt-dimension-space-2); --sf-pad-row: var(--dt-dimension-space-2); --sf-gap: var(--dt-dimension-space-1); --sf-stroke-a: 0.055; --sf-stroke-extra: 0.07; --sf-shadow-geo: 0 20px 48px; --sf-shadow-rgb: var(--ui-shadow-light-rgb); --sf-shadow-a: 0.16; --sf-card-shadow: 0 1px 2px rgba(var(--ui-shadow-light-rgb), .16), 0 2px 4px rgba(var(--ui-shadow-light-rgb), .08); --sf-accent-fg: var(--dt-semantic-color-light-action-on-accent); --sf-letter: 0.01em; --sf-weight: 600; --sf-card-glass-a: 0.12; } html[data-mode="dark"] { --sf-radius-win: 0px; --sf-radius-card: var(--dt-dimension-radius-panel); --sf-radius-row: var(--dt-dimension-radius-control); --sf-radius-chip: var(--dt-dimension-radius-control); --sf-radius-pill: var(--dt-dimension-radius-full); --sf-pad-card: var(--dt-dimension-space-2); --sf-pad-row: var(--dt-dimension-space-2); --sf-gap: var(--dt-dimension-space-1); --sf-stroke-a: 0.11; --sf-stroke-extra: 0.08; --sf-shadow-geo: 0 24px 60px; --sf-shadow-rgb: var(--ui-black-rgb); --sf-shadow-a: 0.50; --sf-card-shadow: 0 2px 6px rgba(var(--ui-black-rgb),.25), 0 10px 28px rgba(var(--ui-black-rgb),.26); --sf-accent-fg: var(--dt-semantic-color-dark-action-on-accent); --sf-letter: 0.01em; --sf-weight: 600; --sf-card-glass-a: 0.12; } /* Mode-only tokens: ink (used for strokes and text-shadow), and the tone palette (blue/orange/green + an extra pink for birthdays) shared by every design system. */ html[data-mode="light"] { --ink: var(--dt-semantic-color-light-ink); --shade-shadow: var(--dt-semantic-color-light-shadow-text); --tone-blue-bg: var(--dt-semantic-color-light-category-blue-bg); --tone-blue-fg: var(--dt-semantic-color-light-category-blue-fg); --tone-blue-bar: var(--dt-semantic-color-light-category-blue-bar); --tone-orange-bg: var(--dt-semantic-color-light-category-orange-bg); --tone-orange-fg: var(--dt-semantic-color-light-category-orange-fg); --tone-orange-bar: var(--dt-semantic-color-light-category-orange-bar); --tone-green-bg: var(--dt-semantic-color-light-category-green-bg); --tone-green-fg: var(--dt-semantic-color-light-category-green-fg); --tone-green-bar: var(--dt-semantic-color-light-category-green-bar); --tone-pink-bg: var(--dt-semantic-color-light-category-pink-bg); --tone-pink-fg: var(--dt-semantic-color-light-category-pink-fg); --tone-pink-bar: var(--dt-semantic-color-light-category-pink-bar); --tone-purple-bg: var(--dt-semantic-color-light-category-purple-bg); --tone-purple-fg: var(--dt-semantic-color-light-category-purple-fg); --tone-purple-bar: var(--dt-semantic-color-light-category-purple-bar); } html[data-mode="dark"] { --ink: var(--dt-semantic-color-dark-ink); --shade-shadow: var(--dt-semantic-color-dark-shadow-text); --tone-blue-bg: var(--dt-semantic-color-dark-category-blue-bg); --tone-blue-fg: var(--dt-semantic-color-dark-category-blue-fg); --tone-blue-bar: var(--dt-semantic-color-dark-category-blue-bar); --tone-orange-bg: var(--dt-semantic-color-dark-category-orange-bg); --tone-orange-fg: var(--dt-semantic-color-dark-category-orange-fg); --tone-orange-bar: var(--dt-semantic-color-dark-category-orange-bar); --tone-green-bg: var(--dt-semantic-color-dark-category-green-bg); --tone-green-fg: var(--dt-semantic-color-dark-category-green-fg); --tone-green-bar: var(--dt-semantic-color-dark-category-green-bar); --tone-pink-bg: var(--dt-semantic-color-dark-category-pink-bg); --tone-pink-fg: var(--dt-semantic-color-dark-category-pink-fg); --tone-pink-bar: var(--dt-semantic-color-dark-category-pink-bar); --tone-purple-bg: var(--dt-semantic-color-dark-category-purple-bg); --tone-purple-fg: var(--dt-semantic-color-dark-category-purple-fg); --tone-purple-bar: var(--dt-semantic-color-dark-category-purple-bar); } /* ========================================================================== */ /* 2026-08 — Unified Fluent/Liquid Glass product shell */ /* Trang Giới thiệu là chuẩn: một accent, lớp nền có chủ đích, phân cấp rõ. */ /* ========================================================================== */ html[data-mode="light"] { --sf-accent: var(--dt-semantic-color-light-action-accent); --sf-accent-rgb: var(--dt-semantic-color-light-action-accent-rgb); /* Bảng nền Light bám ứng dụng Claude: canvas ivory ấm (#faf9f5), thẻ/panel trắng tinh NỔI LÊN trên nó. Trước đây canvas và thẻ cùng là #ffffff nên không có phân lớp — thẻ chỉ còn nhận ra được nhờ bóng đổ, và mọi vùng nhập cũng chìm nghỉm vì trùng màu nền. Ba bậc bây giờ: canvas 250,249,245 → hàng 245,244,239 → thẻ/vùng nhập 255,255,255. */ --sf-chrome: var(--dt-semantic-color-light-surface-rgb-shell); --sf-card: var(--dt-semantic-color-light-surface-rgb-raised); --sf-row: var(--dt-semantic-color-light-surface-rgb-fill); --sf-text: var(--dt-semantic-color-light-text-primary); --sf-sub: var(--dt-semantic-color-light-text-secondary); /* Ba bậc chữ đều là xám ẤM (hue lệch về vàng) để không lạc tông trên nền ivory — xám xanh slate cũ nhìn ra "lạnh" ngay khi đặt cạnh #faf9f5. Tương phản trên thẻ trắng: --sf-text 16.6:1 · --sf-sub 9.1:1 · --sf-mute 5.25:1; trên canvas ivory --sf-mute vẫn 4.98:1, còn trên hàng 245,244,239 là 4.77:1 — tất cả trên ngưỡng AA 4.5:1 của WCAG 1.4.3. Token này mang thông tin thật (giờ giấc, trạng thái đồng bộ, mô tả thiết lập, placeholder) nên không được hạ thêm. PHẢI sửa ở ĐÂY chứ không phải ở styles.css: selector này là html[data-mode="light"] (specificity 0,2,1), thắng html[data-mode="light"] (0,1,1) của styles.css bất kể thứ tự nạp — nên bản vá đặt trong styles.css không bao giờ có hiệu lực. Đây cũng là file duy nhất AntiNote nạp (antiNote.html không nạp styles.css), nên sửa ở đây thì cửa sổ AntiNote mới nhận được. */ --sf-mute: var(--dt-semantic-color-light-text-muted); --ux-header: var(--dt-semantic-color-light-surface-shell); --ux-workspace: var(--dt-semantic-color-light-surface-base); --ux-panel: var(--dt-semantic-color-light-surface-raised); --ux-card: var(--dt-semantic-color-light-surface-raised); --ux-row: color-mix(in srgb, var(--dt-semantic-color-light-surface-fill) 94%, transparent); --ux-border: var(--dt-semantic-color-light-border-default); --ux-border-hover: var(--dt-semantic-color-light-border-hover); --ux-control-border-hover: var(--dt-semantic-color-light-border-control-hover); --ux-control-border-active: var(--dt-semantic-color-light-border-focus); --ux-divider: var(--dt-semantic-color-light-border-divider); /* Vùng nhập phải TRẮNG HƠN nền chứ không bằng nền (khuôn nút "Code" của Claude). Mọi ô input/select/textarea dùng cặp token này thay vì ghim #ffffff + #d1d5db như trước — đổi nền app là ô nhập đi theo. */ --ux-input-bg: var(--dt-semantic-color-light-surface-raised); --ux-input-border: var(--dt-semantic-color-light-border-control); --ux-input-border-strong: var(--dt-semantic-color-light-border-control-strong); --ux-shadow: var(--dt-semantic-color-light-shadow-popover); } html[data-mode="dark"] { --sf-accent: var(--dt-semantic-color-dark-action-accent); --sf-accent-rgb: var(--dt-semantic-color-dark-action-accent-rgb); /* Bảng nền Dark bám Google Keep: xám TRUNG TÍNH #202124, không còn xanh navy. Ba bậc: canvas 32,33,36 → panel 39,40,43 → thẻ 42,43,46 → hàng 48,49,52 (đúng bậc hover của Keep). */ --sf-chrome: var(--dt-semantic-color-dark-surface-rgb-shell); --sf-card: var(--dt-semantic-color-dark-surface-rgb-raised); --sf-row: var(--dt-semantic-color-dark-surface-rgb-fill); /* Bộ chữ của Keep. Tương phản trên thẻ 42,43,46: --sf-text 11.75:1 · --sf-sub 7.82:1 · --sf-mute 5.36:1 — đạt AA và vẫn giữ đủ ba bậc phân cấp. */ --sf-text: var(--dt-semantic-color-dark-text-primary); --sf-sub: var(--dt-semantic-color-dark-text-secondary); --sf-mute: var(--dt-semantic-color-dark-text-muted); --ux-header: color-mix(in srgb, var(--dt-semantic-color-dark-surface-shell) 91%, transparent); --ux-workspace: color-mix(in srgb, var(--dt-semantic-color-dark-surface-shell) 92%, transparent); --ux-panel: color-mix(in srgb, var(--dt-semantic-color-dark-surface-base) 90%, transparent); --ux-card: color-mix(in srgb, var(--dt-semantic-color-dark-surface-raised) 92%, transparent); --ux-row: color-mix(in srgb, var(--dt-semantic-color-dark-surface-fill) 82%, transparent); --ux-border: var(--dt-semantic-color-dark-border-default); --ux-border-hover: var(--dt-semantic-color-dark-border-hover); --ux-control-border-hover: var(--dt-semantic-color-dark-border-control-hover); --ux-control-border-active: var(--dt-semantic-color-dark-border-focus); --ux-divider: var(--dt-semantic-color-dark-border-divider); --ux-input-bg: var(--dt-semantic-color-dark-surface-fill); --ux-input-border: var(--dt-semantic-color-dark-border-control); --ux-input-border-strong: var(--dt-semantic-color-dark-border-control-strong); --ux-shadow: var(--dt-semantic-color-dark-shadow-popover); } /* ===================================================================== MATERIAL — trục vật liệu độc lập với data-mode. Thay cho thanh trượt 0–100 cũ. Bốn bậc rời rạc, mỗi bậc là một bộ giá trị đã QA: solid không trong tí nào focus ưu tiên đọc, hình nền chỉ ló ở khe acrylic mặc định — blur thật, bề mặt vẫn đủ đục glass mỏng nhất cho phép HỢP ĐỒNG KHẢ ĐỌC — --a-content không xuống dưới .72 (ARS-1, 17/09/2026: Kính trong .72 + scrim .46 Tối / .40 Sáng vẫn giữ chữ muted ≥4.5:1 trên hình nền trắng/đen tuyền, đo bởi tests/e2e/readabilityStandard.spec.js). --a-layer: độ đục của THẺ nằm trên một tấm đã che (grid/pane/canvas) — tấm là lớp che duy nhất, thẻ chỉ là lớp tách, không che lần hai. (Ghi chú cũ: .78 là sàn trước ARS-1.) Trường hợp xấu nhất: card trắng trên hình nền đen tuyền. --scrim-a nằm trên chính hình nền (.app-bg-overlay), nâng SÀN của thứ có thể ở sau một bề mặt, nên .78 hợp với scrim .38 vẫn đạt ~4.9:1. Đổi một trong hai số mà không đổi số kia là phá hợp đồng. --a-shell / --a-header mỏng hơn --a-content được, vì shell là khung và khe giữa các card, không mang thân chữ — và đó cũng là chỗ hiệu ứng trong suốt đọc ra rõ nhất. Fallback :root ngay dưới trùng giá trị bậc "solid": hồ sơ chưa từng qua panel Giao diện, và khoảnh khắc trước khi bundle chạy, render đục hẳn thay vì chớp một khung nửa trong suốt. ===================================================================== */ :root { --t: 0; --a-shell: 1; --a-header: 1; --a-content: 1; --a-layer: 1; --scrim-a: 0; --glass-blur: 0px; --glass-sat: 1; } html[data-material="solid"] { --t: 0; --a-shell: 1; --a-header: 1; --a-content: 1; --a-layer: 1; --scrim-a: 0; --glass-blur: 0px; --glass-sat: 1; } html[data-material="focus"] { --t: 0.25; --a-shell: 0.92; --a-header: 0.92; --a-content: 0.98; --a-layer: 1; --scrim-a: 0.62; --glass-blur: 8px; --glass-sat: 1.1; } html[data-material="acrylic"] { --t: 0.55; --a-shell: 0.70; --a-header: 0.78; --a-content: 0.90; --a-layer: 0.6; --scrim-a: 0.52; --glass-blur: 20px; --glass-sat: 1.4; } html[data-material="glass"] { --t: 0.80; --a-shell: 0.54; --a-header: 0.66; --a-content: 0.72; --a-layer: 0.5; --scrim-a: 0.46; --glass-blur: 30px; --glass-sat: 1.6; } /* Dark wallpapers need less veiling than light ones to reach the same contrast floor. Floor is elevated to guarantee WCAG 2.2 AA (>= 4.5:1) even on bright/high-contrast daily Bing/Unsplash images. */ html[data-mode="dark"][data-material="focus"] { --scrim-a: 0.58; } html[data-mode="dark"][data-material="acrylic"] { --scrim-a: 0.50; --a-content: 0.90; } html[data-mode="dark"][data-material="glass"] { --scrim-a: 0.46; --a-content: 0.72; } } /* @layer legacy */