@layer legacy { /* * AntiTask UI foundation. This file intentionally defines semantic aliases * instead of replacing the persisted appearance model. `data-mode`, * `data-material` and `has-wallpaper` are the remaining theme axes. */ :root { /* Hệ số của mức kích thước (1 hoặc 1.25, utils/uiScaleTier.js). Token DTCG đã tự phóng ở mức Lớn — chỉ nhân hệ số này lên literal px chưa thành token. */ --ui-layout-scale: var(--font-scale, 1); --ui-control-h-micro: var(--ui-size-sm); --ui-control-h-compact: var(--ui-size-sm); --ui-control-h-toolbar-dense: var(--ui-size-sm); /* AT-UI Rhythm: tên cũ trỏ về 3 bậc --ui-size-* để ăn cả trục Mật độ. */ --ui-control-h-standard: var(--ui-size-md); /* Main-shell controls deliberately share one hit target across every module. Content buttons may use other tiers; header controls may not. */ --ui-header-control-size: var(--dt-component-header-control-size); --ui-header-icon-btn-size: var(--dt-component-header-icon-button-size); --ui-header-icon-size: var(--dt-component-header-icon-size); /* Thanh soạn thảo (Notebook/AntiNote/Project/Hôm nay/Ghi chú liên kết) — chuẩn editor Word Web/Google Docs/Fluent 2 Toolbar: nút 28 + icon 20 (BA 12/10/2026; trước 24/16). */ --ui-editor-toolbar-control: var(--ui-size-dense); --ui-editor-toolbar-icon: var(--ui-icon-md); --ui-header-cluster-padding: var(--dt-component-header-cluster-padding); --ui-header-cluster-inset: var(--dt-component-header-cluster-control-inset); --ui-header-week-picker-width: var(--dt-component-header-week-picker-width); --ui-header-segment-item-width: var(--dt-component-header-view-segment-item-width); --ui-header-search-min: var(--dt-dimension-header-search-min); --ui-icon-context: var(--dt-dimension-icon-context); --ui-icon-micro: var(--dt-dimension-icon-micro); --ui-icon-dense: var(--dt-dimension-icon-dense); --ui-icon-control: var(--dt-dimension-icon-control); --ui-icon-standard: var(--dt-dimension-icon-control); --ui-icon-prominent: var(--dt-dimension-icon-prominent); --ui-icon-navigation: var(--dt-dimension-icon-navigation); --ui-rail-w: var(--dt-dimension-rail-compact); /* Standard desktop header/titlebar height matches rail width via design token (50px). */ --ui-header-h: var(--dt-component-header-height); --ui-pane-header-h: var(--dt-component-header-pane-height); --ui-rail-w-expanded: var(--dt-dimension-rail-expanded); --ui-resizer-hit: var(--dt-dimension-resizer-hit); --ui-resizer-hit-half: var(--dt-dimension-resizer-hit-half); --ui-resizer-line: var(--dt-dimension-resizer-line); --ui-resizer-drag-line: var(--dt-component-resizer-drag-line-width); --ui-space-1: var(--dt-dimension-space-1); --ui-space-2: var(--dt-dimension-space-2); --ui-space-3: var(--dt-dimension-space-3); --ui-space-4: var(--dt-dimension-space-4); /* Thang chuẩn lưới 4px + 3 cỡ control/icon/radius (docs/BAO-CAO-CHUAN-HOA-UI-TOKEN-2026-09-18.md §4). Code mới dùng các tên này; tên cũ còn giữ tới khi migrate xong từng màn. */ --ui-space-0: var(--dt-dimension-space-0); --ui-space-px: var(--dt-dimension-space-px); --ui-space-0-5: var(--dt-dimension-space-0-5); --ui-space-1-5: var(--dt-dimension-space-1-5); --ui-space-2-5: var(--dt-dimension-space-2-5); --ui-space-3-5: var(--dt-dimension-space-3-5); --ui-space-4-5: var(--dt-dimension-space-4-5); --ui-space-5: var(--dt-dimension-space-5); --ui-space-6: var(--dt-dimension-space-6); --ui-space-8: var(--dt-dimension-space-8); --ui-space-10: var(--dt-dimension-space-10); --ui-space-12: var(--dt-dimension-space-12); --ui-size-sm: var(--dt-dimension-size-sm); --ui-size-md: var(--dt-dimension-size-md); --ui-size-lg: var(--dt-dimension-size-lg); --ui-size-touch: var(--dt-dimension-size-touch); --ui-size-dense: var(--dt-dimension-size-dense); --ui-stroke-thin: var(--dt-dimension-stroke-thin); --ui-stroke-thick: var(--dt-dimension-stroke-thick); --ui-stroke-thicker: var(--dt-dimension-stroke-thicker); --ui-stroke-thickest: var(--dt-dimension-stroke-thickest); /* Màu trộn shade/tint cho trạng thái đậm hơn (hover/pressed) bằng color-mix. */ --ui-mix-shade: var(--dt-color-base-black); --ui-mix-tint: var(--dt-color-base-white); --ui-icon-xs: var(--dt-dimension-icon-xs); --ui-icon-sm: var(--dt-dimension-icon-sm); --ui-icon-md: var(--dt-dimension-icon-md); --ui-icon-lg: var(--dt-dimension-icon-lg); --ui-icon-stroke: var(--dt-dimension-icon-stroke); --ui-radius-xs: var(--dt-dimension-radius-xs); --ui-radius-sm: var(--dt-dimension-radius-sm); --ui-radius-md: var(--dt-dimension-radius-md); --ui-radius-lg: var(--dt-dimension-radius-lg); --ui-radius-xl: var(--dt-dimension-radius-xl); --ui-popover-w-sm: var(--dt-component-popover-small-width); --ui-popover-w-md: var(--dt-component-popover-medium-width); --ui-popover-w-lg: var(--dt-component-popover-large-width); --ui-pane-list-w-min: var(--dt-component-pane-list-min-width); --ui-pane-list-w: var(--dt-component-pane-list-width); --ui-pane-list-w-max: var(--dt-component-pane-list-max-width); --ui-pane-detail-w-sm: var(--dt-component-pane-detail-small-width); --ui-pane-detail-w-md: var(--dt-component-pane-detail-medium-width); --ui-pane-detail-w-lg: var(--dt-component-pane-detail-large-width); --ui-dialog-header-h: var(--dt-component-dialog-header-height); --ui-dialog-footer-h: var(--dt-component-dialog-footer-height); --ui-dialog-padding: var(--dt-component-dialog-padding); --ui-dialog-radius: var(--dt-component-dialog-radius); --ui-dialog-compose-w: var(--dt-component-dialog-compose-max-width); /* Elevation 1–4 trỏ vào bóng semantic sẵn có (đổi theo Sáng/Tối). */ --ui-elevation-1: var(--ui-shadow-sm); --ui-elevation-2: var(--ui-shadow-popover); --ui-elevation-3: var(--ui-shadow-xl); --ui-elevation-4: var(--ui-shadow-window); --ui-radius-control: var(--dt-dimension-radius-control); --ui-radius-panel: var(--dt-dimension-radius-panel); --ui-radius-item: var(--dt-dimension-radius-item); --ui-radius-full: var(--dt-dimension-radius-full); --ui-radius-pill: var(--dt-dimension-radius-full); --ui-radius-circle: var(--dt-dimension-radius-circle); --ui-focus-ring-width: var(--dt-component-focus-ring-width); --ui-focus-ring-offset: var(--dt-component-focus-ring-offset); --ui-field-h: var(--dt-component-field-height); --ui-field-gap: var(--dt-component-field-gap); --ui-field-pad-inline: var(--dt-component-field-padding-inline); --ui-card-pad: var(--dt-component-card-padding); --ui-card-gap: var(--dt-component-card-gap); --ui-note-card-w: var(--dt-component-card-note-width); --ui-panel-pad: var(--dt-component-panel-padding); --ui-panel-gap: var(--dt-component-panel-gap); /* AT-UI Rhythm: TRONG nhóm (inline/stack) < GIỮA nhóm (group) ≤ đệm panel. */ --ui-rhythm-inline: var(--dt-component-rhythm-inline); --ui-rhythm-stack: var(--dt-component-rhythm-stack); --ui-rhythm-group: var(--dt-component-rhythm-group); --ui-rhythm-panel: var(--dt-component-rhythm-panel); --ui-reading-measure: var(--dt-component-rhythm-reading-measure); --ui-list-row-min: var(--dt-component-list-row-min-height); --ui-list-row-dense: var(--dt-component-list-row-dense-min-height); /* Mục điều hướng trong cột con (cây Notebook, danh sách Project, menu Cài đặt) — hợp đồng NavigationView của Windows 11. */ --ui-nav-item-h: var(--dt-component-nav-list-height); --ui-nav-item-h-two-line: var(--dt-component-nav-list-height-two-line); --ui-nav-item-inset: var(--dt-component-nav-list-inset-inline); --ui-nav-item-pad: var(--dt-component-nav-list-padding-inline); --ui-nav-item-indent: var(--dt-component-nav-list-indent-step); --ui-nav-item-gap: var(--dt-component-nav-list-gap); --ui-nav-group-gap: var(--dt-component-nav-list-group-gap); --ui-nav-indicator-w: var(--dt-component-nav-list-indicator-width); --ui-nav-indicator-h: var(--dt-component-nav-list-indicator-height); --ui-nav-selected-alpha: var(--dt-component-nav-list-selected-fill-alpha); /* Nút Phụ tonal: nền = màu chữ × hệ số, không viền (BA 12/10/2026). */ --ui-btn-secondary-fill-alpha: var(--dt-component-button-secondary-fill-alpha); --ui-btn-secondary-hover-alpha: var(--dt-component-button-secondary-hover-alpha); --ui-btn-secondary-active-alpha: var(--dt-component-button-secondary-active-alpha); /* Thẻ nổi trên hình nền không trong hơn mức này (lớp Layer trên Mica). */ --ui-raised-floor-wallpaper: var(--dt-material-raised-floor-with-wallpaper); --ui-list-row-gap: var(--dt-component-list-row-gap); --ui-list-row-pad-inline: var(--dt-component-list-row-padding-inline); --ui-calendar-priority-edge-width: var(--dt-component-calendar-item-priority-edge-width); --ui-calendar-interaction-ring-width: var(--dt-component-calendar-item-interaction-ring-width); /* Chuẩn Flat Surface (mẫu = dạng Tháng): khối phẳng liền ô, một vạch chia, chỉ bo góc ngoài, dòng bên trong không nền. Sáng/Tối tự đổi qua --ux-*. Nơi dùng đầu tiên: Lịch (calendar.css MỤC D/E). */ --ui-flat-gap: var(--dt-component-flat-surface-gap); --ui-flat-divider-w: var(--dt-component-flat-surface-divider-width); --ui-flat-radius-outer: var(--dt-component-flat-surface-radius-outer); --ui-flat-radius-inner: var(--dt-component-flat-surface-radius-inner); --ui-flat-radius-item: var(--dt-component-flat-surface-item-radius); --ui-flat-shadow: none; --ui-flat-row-bg: transparent; --ui-flat-row-hover: var(--ux-hover); --ui-flat-today-ring: inset 0 0 0 var(--ui-flat-divider-w) var(--ui-accent); --ui-flat-section-divider: var(--dt-component-flat-surface-section-divider); --ui-flat-group-radius: var(--dt-component-flat-surface-group-radius); /* Lớp nổi (menu/popover/dialog/toast) GIỮ một bóng mềm (BA Q1 2026-09-28): nó đè lên nội dung nên cần độ nổi để tách khỏi nền. Bóng theo sáng/tối nằm sẵn trong --ui-elevation-2. */ --ui-flat-overlay-shadow: var(--ui-elevation-2); --ui-flat-row-inset: var(--dt-component-flat-surface-row-inset); --ui-flat-today-inset: var(--dt-component-flat-surface-today-inset); --ui-flat-today-radius: var(--dt-component-flat-surface-today-radius); --ui-dialog-edge-gap: var(--dt-component-dialog-edge-gap); --ui-dialog-max-sm: var(--dt-component-dialog-small-max-width); --ui-dialog-max-md: var(--dt-component-dialog-medium-max-width); --ui-dialog-max-lg: var(--dt-component-dialog-large-max-width); --ui-dialog-max-xl: var(--dt-component-dialog-extra-large-max-width); --ui-nav-item-min: var(--dt-component-navigation-item-min-height); --ui-navigation-rail-width: var(--dt-component-navigation-rail-width); --ui-navigation-item-h: var(--dt-component-navigation-item-height); --ui-navigation-item-h-compact: var(--dt-component-navigation-item-height-compact); --ui-navigation-item-h-collapsed: var(--dt-component-navigation-item-height-collapsed); --ui-navigation-item-gap: var(--dt-component-navigation-item-gap); --ui-navigation-item-pad-block: var(--dt-component-navigation-item-padding-block); --ui-navigation-item-pad-inline: var(--dt-component-navigation-item-padding-inline); --ui-navigation-item-radius: var(--dt-component-navigation-item-radius); --ui-navigation-label-h: var(--dt-component-navigation-label-height); --ui-empty-max: var(--dt-component-empty-state-content-max-width); --ui-empty-gap: var(--dt-component-empty-state-gap); --ui-density-gap: var(--ui-space-1); --ui-density-pad-card: var(--ui-space-2); --ui-density-pad-row: var(--ui-space-2); --ui-letter-spacing: var(--sf-letter); --ui-stroke-alpha: var(--sf-stroke-a); --ui-stroke-extra: var(--sf-stroke-extra); --ui-shadow-geometry: var(--sf-shadow-geo); --ui-shadow-rgb: var(--sf-shadow-rgb); --ui-shadow-alpha: var(--sf-shadow-a); --ui-shadow-card: var(--sf-card-shadow); --ui-white-rgb: var(--dt-color-channel-white); --ui-black-rgb: var(--dt-color-channel-black); --ui-neutral-rgb: var(--dt-color-channel-neutral); --ui-scrim-rgb: var(--dt-color-channel-scrim); --ui-shadow-light-rgb: var(--dt-color-channel-shadow-light); /* Bo góc cửa sổ là một nửa của "thẻ nổi trên nền shell" (nửa còn lại là --shell-gap). Đặt 0 làm shell dính liền mép màn hình, và khi đó Fluent với Glass chỉ còn khác nhau 2px bo góc control — mắt không phân biệt được. */ --ui-radius-window: var(--dt-dimension-radius-window); --ui-duration-fast: var(--dt-motion-duration-fast); --ui-duration-standard: var(--dt-motion-duration-standard); --ui-ease: var(--dt-motion-easing-standard); --ui-duration-instant: var(--dt-motion-duration-instant); --ui-duration-slow: var(--dt-motion-duration-slow); --ui-duration-page: var(--dt-motion-duration-page); --ui-duration-spin: var(--dt-motion-duration-spin); --ui-duration-pulse: var(--dt-motion-duration-pulse); --ui-ease-enter: var(--dt-motion-easing-enter); --ui-ease-exit: var(--dt-motion-easing-exit); --ui-motion-distance: var(--dt-motion-distance-enter); --ui-motion-distance-subtle: var(--dt-motion-distance-subtle); --ui-motion-scale-popover: var(--dt-motion-scale-popover-enter); --ui-motion-scale-dialog: var(--dt-motion-scale-dialog-enter); --ui-interaction-stable-transform: var(--dt-motion-interaction-stable-transform); --ui-press-scale: var(--dt-motion-interaction-press-scale); --ui-scrollbar-w: var(--dt-component-scrollbar-width); --ui-scrollbar-idle-delay: var(--dt-component-scrollbar-idle-delay); --ui-scrollbar-thumb: color-mix(in srgb, var(--ui-text-primary) 18%, transparent); --ui-scrollbar-thumb-hover: color-mix(in srgb, var(--ui-text-primary) 32%, transparent); --ui-layer-header: var(--dt-layout-layer-header); /* Thang lớp CỤC BỘ trong một trang (dưới mọi lớp toàn app ở dưới đây). */ --ui-layer-raised: var(--dt-layout-layer-local-raised); --ui-layer-sticky: var(--dt-layout-layer-local-sticky); --ui-layer-control: var(--dt-layout-layer-local-control); --ui-layer-pane: var(--dt-layout-layer-local-pane); --ui-layer-pane-control: var(--dt-layout-layer-local-pane-control); --ui-layer-pane-top: var(--dt-layout-layer-local-pane-top); --ui-layer-popover: var(--dt-layout-layer-popover); --ui-layer-dropdown: var(--ui-layer-popover); --ui-layer-notification: var(--dt-layout-layer-notification); --ui-layer-modal: var(--dt-layout-layer-modal); --ui-layer-alert: var(--dt-layout-layer-alert); --ui-layer-system: var(--dt-layout-layer-system); --ui-layer-toast: var(--dt-layout-layer-toast); --ui-badge-h: var(--dt-component-badge-height); --ui-badge-pad-inline: var(--dt-component-badge-padding-inline); /* Compatibility aliases. Existing views can migrate incrementally. */ --app-header-height: var(--ui-header-h); --app-header-btn-size: var(--ui-control-h-standard); --app-header-icon-size: var(--ui-icon-context); --rail-w: var(--ui-rail-w); /* Khe hở giữa các bề mặt cấp 1 (rail, header, thân trang) và mép shell. Đây là DIỆN TÍCH DUY NHẤT hình nền lộ ra được — đặt 0 thì bật hình nền hay đổi bốn bậc độ đục đều không thấy gì. Xem styles.css:14090. */ --shell-gap: var(--dt-layout-shell-gap); --shell-radius: var(--ui-radius-window); /* Bảng màu khung Liền mạch (Cài đặt › Màu khung) — dùng chung cho Sáng/Tối. */ --ui-chrome-palette-blue: var(--dt-semantic-color-chrome-palette-blue); --ui-chrome-palette-green: var(--dt-semantic-color-chrome-palette-green); --ui-chrome-palette-purple: var(--dt-semantic-color-chrome-palette-purple); --ui-chrome-palette-pink: var(--dt-semantic-color-chrome-palette-pink); --ui-chrome-palette-orange: var(--dt-semantic-color-chrome-palette-orange); --ui-chrome-palette-yellow: var(--dt-semantic-color-chrome-palette-yellow); --ui-chrome-palette-graphite: var(--dt-semantic-color-chrome-palette-graphite); --ui-chrome-palette-white: var(--dt-semantic-color-chrome-palette-white); --ui-chrome-ink-light-fg: var(--dt-semantic-color-chrome-ink-light-fg); --ui-chrome-ink-light-fg-muted: var(--dt-semantic-color-chrome-ink-light-fg-muted); --ui-chrome-ink-light-hover: var(--dt-semantic-color-chrome-ink-light-hover); --ui-chrome-ink-light-active: var(--dt-semantic-color-chrome-ink-light-active); --ui-chrome-ink-light-line: var(--dt-semantic-color-chrome-ink-light-line); --ui-chrome-ink-light-field: var(--dt-semantic-color-chrome-ink-light-field); --ui-chrome-ink-dark-fg: var(--dt-semantic-color-chrome-ink-dark-fg); --ui-chrome-ink-dark-fg-muted: var(--dt-semantic-color-chrome-ink-dark-fg-muted); --ui-chrome-ink-dark-hover: var(--dt-semantic-color-chrome-ink-dark-hover); --ui-chrome-ink-dark-active: var(--dt-semantic-color-chrome-ink-dark-active); --ui-chrome-ink-dark-line: var(--dt-semantic-color-chrome-ink-dark-line); --ui-chrome-ink-dark-field: var(--dt-semantic-color-chrome-ink-dark-field); } /* Thẻ nổi (BA 11/10/2026): thẻ tách khỏi nền bàn bằng khe, không viền. Sáng không có hình nền thì trắng trên xám nhạt chỉ chênh ~5% — thêm bóng bậc 1 rất nhẹ để neo cạnh thẻ. Tối và mọi chế độ có hình nền: tông thẻ/ảnh nền đã đủ tách. */ :root { --ui-float-shadow: none; } html[data-mode="light"]:not(.has-wallpaper) { --ui-float-shadow: var(--ui-elevation-1); } html[data-shell-frame="seamless"] { --shell-gap: 0px; --ui-rail-radius: 0px; --ui-rail-divider: transparent; --ui-header-h: var(--dt-component-header-height); --app-header-height: var(--ui-header-h); --rail-w: var(--dt-dimension-rail-compact); --ui-rail-w: var(--dt-dimension-rail-compact); --ui-seamless-avatar-h: var(--ui-header-h); --ui-seamless-canvas-radius: var(--ui-radius-window); /* Khe khung màu bọc cạnh phải/dưới của tấm thân trang (kiểu TickTick). */ --ui-seamless-inset: var(--dt-layout-shell-seamless-inset); } /* The current rail deliberately remains a compact icon rail even when the legacy preference is named "expanded". Labels already occupy a second line inside the 66px rail; widening it would move fixed status affordances and break the established compact-shell contract. */ html[data-rail="expanded"] { --rail-w: var(--ui-navigation-rail-width); } /* Hai hệ phải khác nhau ở CẢ BA bậc bo góc, không chỉ ở control: Fluent là hình học vuông vức của Windows 11, Glass là hình học tròn của vật liệu kính. Chênh lệch chỉ ở control (7 vs 9px) là quá nhỏ để nhận ra. */ html[data-mode="light"] { --ui-surface-shell-rgb: var(--dt-semantic-color-light-surface-rgb-shell); --ui-surface-sunken-rgb: var(--dt-semantic-color-light-surface-rgb-sunken); --ui-surface-base-rgb: var(--dt-semantic-color-light-surface-rgb-base); --ui-surface-raised-rgb: var(--dt-semantic-color-light-surface-rgb-raised); --ui-surface-raised: var(--dt-semantic-color-light-surface-raised); /* bề mặt nổi ĐỤC (không theo độ trong kính) — control nổi trên nội dung */ --ui-surface-overlay-rgb: var(--dt-semantic-color-light-surface-rgb-overlay); --ui-surface-fill-rgb: var(--dt-semantic-color-light-surface-rgb-fill); --ui-accent: var(--dt-semantic-color-light-action-accent); --ui-accent-rgb: var(--dt-semantic-color-light-action-accent-rgb); --ui-accent-solid: var(--dt-semantic-color-light-action-accent-solid); --ui-accent-solid-rgb: var(--dt-semantic-color-light-action-accent-solid-rgb); --ui-chrome-neutral-surface: var(--dt-semantic-color-light-chrome-neutral-surface); --ui-action-hover: var(--dt-semantic-color-light-action-hover); --ui-action-active: var(--dt-semantic-color-light-action-active); --ui-danger: var(--dt-semantic-color-light-status-danger); --ui-danger-solid: var(--dt-semantic-color-light-status-danger-solid); --ui-danger-rgb: var(--dt-semantic-color-light-status-danger-rgb); --ui-danger-bg: var(--dt-semantic-color-light-status-danger-bg); --ui-danger-line: var(--dt-semantic-color-light-status-danger-line); --ui-warning: var(--dt-semantic-color-light-status-warning); --ui-warning-rgb: var(--dt-semantic-color-light-status-warning-rgb); --ui-warning-bg: var(--dt-semantic-color-light-status-warning-bg); --ui-warning-line: var(--dt-semantic-color-light-status-warning-line); --ui-success: var(--dt-semantic-color-light-status-success); --ui-success-rgb: var(--dt-semantic-color-light-status-success-rgb); --ui-success-bg: var(--dt-semantic-color-light-status-success-bg); --ui-success-line: var(--dt-semantic-color-light-status-success-line); --ui-brand-google: var(--dt-semantic-color-light-brand-google); --ui-brand-google-rgb: var(--dt-semantic-color-light-brand-rgb-google); --ui-brand-outlook: var(--dt-semantic-color-light-brand-outlook); --ui-brand-calendar: var(--dt-semantic-color-light-brand-calendar); --ui-brand-teams: var(--dt-semantic-color-light-brand-teams); --ui-brand-zoom: var(--dt-semantic-color-light-brand-zoom); --ui-brand-webex: var(--dt-semantic-color-light-brand-webex); --ui-brand-premium: var(--dt-semantic-color-light-brand-premium); --ui-brand-premium-rgb: var(--dt-semantic-color-light-brand-rgb-premium); --ui-brand-premium-ink: var(--dt-semantic-color-light-brand-premium-ink); --ui-module-task: var(--dt-semantic-color-light-module-tone-task); --ui-module-task-rgb: var(--dt-semantic-color-light-module-tone-rgb-task); --ui-module-note: var(--dt-semantic-color-light-module-tone-note); --ui-module-note-rgb: var(--dt-semantic-color-light-module-tone-rgb-note); --ui-module-project: var(--dt-semantic-color-light-module-tone-project); --ui-module-project-rgb: var(--dt-semantic-color-light-module-tone-rgb-project); --ui-module-capture: var(--dt-semantic-color-light-module-tone-capture); --ui-module-capture-rgb: var(--dt-semantic-color-light-module-tone-rgb-capture); --ui-module-paint: var(--dt-semantic-color-light-module-tone-paint); --ui-module-paint-rgb: var(--dt-semantic-color-light-module-tone-rgb-paint); --ui-module-quick-note: var(--dt-semantic-color-light-module-tone-quick-note); --ui-module-quick-note-rgb: var(--dt-semantic-color-light-module-tone-rgb-quick-note); --ui-module-art: var(--dt-semantic-color-light-module-tone-art); --ui-module-art-rgb: var(--dt-semantic-color-light-module-tone-rgb-art); --ui-module-premium: var(--dt-semantic-color-light-module-tone-premium); --ui-module-premium-rgb: var(--dt-semantic-color-light-module-tone-rgb-premium); --ui-module-dashboard: var(--dt-semantic-color-light-module-tone-dashboard); --ui-module-dashboard-rgb: var(--dt-semantic-color-light-module-tone-rgb-dashboard); --ui-module-settings: var(--dt-semantic-color-light-module-tone-settings); --ui-module-settings-rgb: var(--dt-semantic-color-light-module-tone-rgb-settings); --ui-module-admin: var(--dt-semantic-color-light-module-tone-admin); --ui-module-admin-rgb: var(--dt-semantic-color-light-module-tone-rgb-admin); --ui-note-swatch-black: var(--dt-semantic-color-light-note-palette-swatch-black); --ui-note-swatch-yellow: var(--dt-semantic-color-light-note-palette-swatch-yellow); --ui-note-swatch-green: var(--dt-semantic-color-light-note-palette-swatch-green); --ui-note-swatch-blue: var(--dt-semantic-color-light-note-palette-swatch-blue); --ui-note-swatch-pink: var(--dt-semantic-color-light-note-palette-swatch-pink); --ui-note-swatch-purple: var(--dt-semantic-color-light-note-palette-swatch-purple); --ui-note-swatch-gray: var(--dt-semantic-color-light-note-palette-swatch-gray); --ui-note-bg-white: var(--dt-semantic-color-light-note-palette-canvas-white); --ui-note-bg-black: var(--dt-semantic-color-light-note-palette-canvas-black); --ui-note-bg-yellow: var(--dt-semantic-color-light-note-palette-canvas-yellow); --ui-note-bg-green: var(--dt-semantic-color-light-note-palette-canvas-green); --ui-note-bg-blue: var(--dt-semantic-color-light-note-palette-canvas-blue); --ui-note-bg-pink: var(--dt-semantic-color-light-note-palette-canvas-pink); --ui-note-bg-purple: var(--dt-semantic-color-light-note-palette-canvas-purple); --ui-note-bg-gray: var(--dt-semantic-color-light-note-palette-canvas-gray); --ui-note-on-dark: var(--dt-semantic-color-light-note-palette-on-dark); --ui-note-on-dark-muted: var(--dt-semantic-color-light-note-palette-on-dark-muted); /* Chữ trên giấy màu (vàng/xanh/hồng/tím/xám): Sáng = chữ app; Tối = chữ sáng của bảng giấy. */ --ui-note-on-paper: var(--ui-text-primary); --ui-note-on-paper-muted: var(--ui-text-secondary); /* Màu nền ghi chú tô lên TRANG soạn (note-editor-shell.css). Sáng = đúng bảng giấy. */ --ui-note-page-white: var(--ui-note-bg-white); --ui-note-page-black: var(--ui-note-bg-black); --ui-note-page-yellow: var(--ui-note-bg-yellow); --ui-note-page-green: var(--ui-note-bg-green); --ui-note-page-blue: var(--ui-note-bg-blue); --ui-note-page-pink: var(--ui-note-bg-pink); --ui-note-page-purple: var(--ui-note-bg-purple); --ui-note-page-gray: var(--ui-note-bg-gray); --ui-category-blue-bg: var(--dt-semantic-color-light-category-blue-bg); --ui-category-blue-fg: var(--dt-semantic-color-light-category-blue-fg); --ui-category-orange-bg: var(--dt-semantic-color-light-category-orange-bg); --ui-category-orange-fg: var(--dt-semantic-color-light-category-orange-fg); --ui-category-green-bg: var(--dt-semantic-color-light-category-green-bg); --ui-category-green-fg: var(--dt-semantic-color-light-category-green-fg); --ui-category-pink-bg: var(--dt-semantic-color-light-category-pink-bg); --ui-category-pink-fg: var(--dt-semantic-color-light-category-pink-fg); --ui-category-purple-bg: var(--dt-semantic-color-light-category-purple-bg); --ui-category-purple-fg: var(--dt-semantic-color-light-category-purple-fg); --ui-tool-list: var(--dt-semantic-color-light-tool-list); --ui-tool-insert: var(--dt-semantic-color-light-tool-insert); --ui-tool-remove: var(--dt-semantic-color-light-tool-remove); --ui-tool-action: var(--dt-semantic-color-light-tool-action); --ui-tool-copy: var(--dt-semantic-color-light-tool-copy); --ui-tool-nav-recent: var(--dt-semantic-color-light-tool-nav-recent); --ui-tool-nav-all: var(--dt-semantic-color-light-tool-nav-all); --ui-tool-swatch-text: var(--dt-semantic-color-light-tool-swatch-text); --ui-tool-swatch-highlight: var(--dt-semantic-color-light-tool-swatch-highlight); --ui-surface-app: var(--dt-semantic-color-light-surface-shell); --ui-surface-rail: var(--dt-semantic-color-light-surface-sunken); --ui-surface-header: var(--dt-semantic-color-light-surface-shell); --ui-surface-workspace: var(--dt-semantic-color-light-surface-base); /* GĐ4: nối vào thang bề mặt thay vì ghim rgb() đục. Cùng màu như cũ (L3 raised) nhưng nay đi theo bậc vật liệu như mọi bề mặt khác. */ --ui-surface-panel: var(--ux-raised); --ui-surface-row: var(--dt-semantic-color-light-surface-fill); --ui-text-primary: var(--dt-semantic-color-light-text-primary); --ui-text-secondary: var(--dt-semantic-color-light-text-secondary); --ui-text-muted: var(--dt-semantic-color-light-text-muted); --ui-text-on-accent: var(--dt-semantic-color-light-text-on-accent); --ui-border-window: var(--dt-semantic-color-light-border-default); --ui-border-hover: var(--dt-semantic-color-light-border-hover); --ui-control-border-hover: var(--ux-control-border-hover); --ui-control-border-active: var(--ux-control-border-active); --ui-hover: var(--dt-semantic-color-light-action-hover); --ui-divider: var(--dt-semantic-color-light-border-divider-static); --ui-divider-subtle: color-mix(in srgb, var(--ui-divider) 64%, transparent); /* Vạch xám khi ĐANG kéo thanh chia cột (rê chuột không tô gì — BA 12/10/2026). */ --ui-resizer-drag-color: var(--dt-semantic-color-light-border-control-hover); --ui-focus-ring: var(--dt-semantic-color-light-focus-ring); --ui-shadow-sm: var(--dt-semantic-color-light-shadow-sm); --ui-shadow-md: var(--dt-semantic-color-light-shadow-md); --ui-shadow-lg: var(--dt-semantic-color-light-shadow-lg); --ui-shadow-xl: var(--dt-semantic-color-light-shadow-xl); --ui-shadow-window: var(--dt-semantic-color-light-shadow-window); --ui-shadow-popover: var(--dt-semantic-color-light-shadow-popover); --ui-shadow-accent: var(--dt-semantic-color-light-shadow-accent); } html[data-mode="dark"] { --ui-surface-shell-rgb: var(--dt-semantic-color-dark-surface-rgb-shell); --ui-surface-sunken-rgb: var(--dt-semantic-color-dark-surface-rgb-sunken); --ui-surface-base-rgb: var(--dt-semantic-color-dark-surface-rgb-base); --ui-surface-raised-rgb: var(--dt-semantic-color-dark-surface-rgb-raised); --ui-surface-raised: var(--dt-semantic-color-dark-surface-raised); /* bề mặt nổi ĐỤC (không theo độ trong kính) — control nổi trên nội dung */ --ui-surface-overlay-rgb: var(--dt-semantic-color-dark-surface-rgb-overlay); --ui-surface-fill-rgb: var(--dt-semantic-color-dark-surface-rgb-fill); --ui-accent: var(--dt-semantic-color-dark-action-accent); --ui-accent-rgb: var(--dt-semantic-color-dark-action-accent-rgb); --ui-accent-solid: var(--dt-semantic-color-dark-action-accent-solid); --ui-accent-solid-rgb: var(--dt-semantic-color-dark-action-accent-solid-rgb); --ui-chrome-neutral-surface: var(--dt-semantic-color-dark-chrome-neutral-surface); --ui-action-hover: var(--dt-semantic-color-dark-action-hover); --ui-action-active: var(--dt-semantic-color-dark-action-active); --ui-danger: var(--dt-semantic-color-dark-status-danger); --ui-danger-solid: var(--dt-semantic-color-dark-status-danger-solid); --ui-danger-rgb: var(--dt-semantic-color-dark-status-danger-rgb); --ui-danger-bg: var(--dt-semantic-color-dark-status-danger-bg); --ui-danger-line: var(--dt-semantic-color-dark-status-danger-line); --ui-warning: var(--dt-semantic-color-dark-status-warning); --ui-warning-rgb: var(--dt-semantic-color-dark-status-warning-rgb); --ui-warning-bg: var(--dt-semantic-color-dark-status-warning-bg); --ui-warning-line: var(--dt-semantic-color-dark-status-warning-line); --ui-success: var(--dt-semantic-color-dark-status-success); --ui-success-rgb: var(--dt-semantic-color-dark-status-success-rgb); --ui-success-bg: var(--dt-semantic-color-dark-status-success-bg); --ui-success-line: var(--dt-semantic-color-dark-status-success-line); --ui-brand-google: var(--dt-semantic-color-dark-brand-google); --ui-brand-google-rgb: var(--dt-semantic-color-dark-brand-rgb-google); --ui-brand-outlook: var(--dt-semantic-color-dark-brand-outlook); --ui-brand-calendar: var(--dt-semantic-color-dark-brand-calendar); --ui-brand-teams: var(--dt-semantic-color-dark-brand-teams); --ui-brand-zoom: var(--dt-semantic-color-dark-brand-zoom); --ui-brand-webex: var(--dt-semantic-color-dark-brand-webex); --ui-brand-premium: var(--dt-semantic-color-dark-brand-premium); --ui-brand-premium-rgb: var(--dt-semantic-color-dark-brand-rgb-premium); --ui-brand-premium-ink: var(--dt-semantic-color-dark-brand-premium-ink); --ui-module-task: var(--dt-semantic-color-dark-module-tone-task); --ui-module-task-rgb: var(--dt-semantic-color-dark-module-tone-rgb-task); --ui-module-note: var(--dt-semantic-color-dark-module-tone-note); --ui-module-note-rgb: var(--dt-semantic-color-dark-module-tone-rgb-note); --ui-module-project: var(--dt-semantic-color-dark-module-tone-project); --ui-module-project-rgb: var(--dt-semantic-color-dark-module-tone-rgb-project); --ui-module-capture: var(--dt-semantic-color-dark-module-tone-capture); --ui-module-capture-rgb: var(--dt-semantic-color-dark-module-tone-rgb-capture); --ui-module-paint: var(--dt-semantic-color-dark-module-tone-paint); --ui-module-paint-rgb: var(--dt-semantic-color-dark-module-tone-rgb-paint); --ui-module-quick-note: var(--dt-semantic-color-dark-module-tone-quick-note); --ui-module-quick-note-rgb: var(--dt-semantic-color-dark-module-tone-rgb-quick-note); --ui-module-art: var(--dt-semantic-color-dark-module-tone-art); --ui-module-art-rgb: var(--dt-semantic-color-dark-module-tone-rgb-art); --ui-module-premium: var(--dt-semantic-color-dark-module-tone-premium); --ui-module-premium-rgb: var(--dt-semantic-color-dark-module-tone-rgb-premium); --ui-module-dashboard: var(--dt-semantic-color-dark-module-tone-dashboard); --ui-module-dashboard-rgb: var(--dt-semantic-color-dark-module-tone-rgb-dashboard); --ui-module-settings: var(--dt-semantic-color-dark-module-tone-settings); --ui-module-settings-rgb: var(--dt-semantic-color-dark-module-tone-rgb-settings); --ui-module-admin: var(--dt-semantic-color-dark-module-tone-admin); --ui-module-admin-rgb: var(--dt-semantic-color-dark-module-tone-rgb-admin); --ui-note-swatch-black: var(--dt-semantic-color-dark-note-palette-swatch-black); --ui-note-swatch-yellow: var(--dt-semantic-color-dark-note-palette-swatch-yellow); --ui-note-swatch-green: var(--dt-semantic-color-dark-note-palette-swatch-green); --ui-note-swatch-blue: var(--dt-semantic-color-dark-note-palette-swatch-blue); --ui-note-swatch-pink: var(--dt-semantic-color-dark-note-palette-swatch-pink); --ui-note-swatch-purple: var(--dt-semantic-color-dark-note-palette-swatch-purple); --ui-note-swatch-gray: var(--dt-semantic-color-dark-note-palette-swatch-gray); --ui-note-bg-white: var(--dt-semantic-color-dark-note-palette-canvas-white); --ui-note-bg-black: var(--dt-semantic-color-dark-note-palette-canvas-black); --ui-note-bg-yellow: var(--dt-semantic-color-dark-note-palette-canvas-yellow); --ui-note-bg-green: var(--dt-semantic-color-dark-note-palette-canvas-green); --ui-note-bg-blue: var(--dt-semantic-color-dark-note-palette-canvas-blue); --ui-note-bg-pink: var(--dt-semantic-color-dark-note-palette-canvas-pink); --ui-note-bg-purple: var(--dt-semantic-color-dark-note-palette-canvas-purple); --ui-note-bg-gray: var(--dt-semantic-color-dark-note-palette-canvas-gray); --ui-note-on-dark: var(--dt-semantic-color-dark-note-palette-on-dark); --ui-note-on-dark-muted: var(--dt-semantic-color-dark-note-palette-on-dark-muted); --ui-note-on-paper: var(--ui-note-on-dark); --ui-note-on-paper-muted: var(--ui-note-on-dark-muted); /* Tối = MỘT màu như Sáng (BA 11/10/2026, phương án A): trung tính Đen/Trắng/Xám chỉ đổi độ sáng nên về đúng bề mặt; màu có sắc pha nửa với bề mặt, chỉ còn ánh màu. */ --ui-note-page-white: var(--ux-raised, var(--ui-surface-raised)); --ui-note-page-black: var(--ux-raised, var(--ui-surface-raised)); --ui-note-page-gray: var(--ux-raised, var(--ui-surface-raised)); --ui-note-page-yellow: color-mix(in srgb, var(--ui-note-bg-yellow) 50%, var(--ux-raised, var(--ui-surface-raised))); --ui-note-page-green: color-mix(in srgb, var(--ui-note-bg-green) 50%, var(--ux-raised, var(--ui-surface-raised))); --ui-note-page-blue: color-mix(in srgb, var(--ui-note-bg-blue) 50%, var(--ux-raised, var(--ui-surface-raised))); --ui-note-page-pink: color-mix(in srgb, var(--ui-note-bg-pink) 50%, var(--ux-raised, var(--ui-surface-raised))); --ui-note-page-purple: color-mix(in srgb, var(--ui-note-bg-purple) 50%, var(--ux-raised, var(--ui-surface-raised))); --ui-category-blue-bg: var(--dt-semantic-color-dark-category-blue-bg); --ui-category-blue-fg: var(--dt-semantic-color-dark-category-blue-fg); --ui-category-orange-bg: var(--dt-semantic-color-dark-category-orange-bg); --ui-category-orange-fg: var(--dt-semantic-color-dark-category-orange-fg); --ui-category-green-bg: var(--dt-semantic-color-dark-category-green-bg); --ui-category-green-fg: var(--dt-semantic-color-dark-category-green-fg); --ui-category-pink-bg: var(--dt-semantic-color-dark-category-pink-bg); --ui-category-pink-fg: var(--dt-semantic-color-dark-category-pink-fg); --ui-category-purple-bg: var(--dt-semantic-color-dark-category-purple-bg); --ui-category-purple-fg: var(--dt-semantic-color-dark-category-purple-fg); --ui-tool-list: var(--dt-semantic-color-dark-tool-list); --ui-tool-insert: var(--dt-semantic-color-dark-tool-insert); --ui-tool-remove: var(--dt-semantic-color-dark-tool-remove); --ui-tool-action: var(--dt-semantic-color-dark-tool-action); --ui-tool-copy: var(--dt-semantic-color-dark-tool-copy); --ui-tool-nav-recent: var(--dt-semantic-color-dark-tool-nav-recent); --ui-tool-nav-all: var(--dt-semantic-color-dark-tool-nav-all); --ui-tool-swatch-text: var(--dt-semantic-color-dark-tool-swatch-text); --ui-tool-swatch-highlight: var(--dt-semantic-color-dark-tool-swatch-highlight); --ui-surface-app: var(--dt-semantic-color-dark-surface-shell); --ui-surface-rail: var(--dt-semantic-color-dark-surface-sunken); --ui-surface-header: var(--dt-semantic-color-dark-surface-shell); --ui-surface-workspace: var(--dt-semantic-color-dark-surface-base); /* GĐ4: nối vào thang bề mặt thay vì ghim rgb() đục. Cùng màu như cũ (L3 raised) nhưng nay đi theo bậc vật liệu như mọi bề mặt khác. */ --ui-surface-panel: var(--ux-raised); --ui-surface-row: var(--dt-semantic-color-dark-surface-fill); --ui-text-primary: var(--dt-semantic-color-dark-text-primary); --ui-text-secondary: var(--dt-semantic-color-dark-text-secondary); --ui-text-muted: var(--dt-semantic-color-dark-text-muted); --ui-text-on-accent: var(--dt-semantic-color-dark-text-on-accent); --ui-border-window: var(--dt-semantic-color-dark-border-default); --ui-border-hover: var(--dt-semantic-color-dark-border-hover); --ui-control-border-hover: var(--ux-control-border-hover); --ui-control-border-active: var(--ux-control-border-active); --ui-hover: var(--dt-semantic-color-dark-action-hover); --ui-divider: var(--dt-semantic-color-dark-border-divider-static); --ui-divider-subtle: color-mix(in srgb, var(--ui-divider) 64%, transparent); /* Vạch xám khi ĐANG kéo thanh chia cột (rê chuột không tô gì — BA 12/10/2026). */ --ui-resizer-drag-color: var(--dt-semantic-color-dark-border-control-hover); --ui-focus-ring: var(--dt-semantic-color-dark-focus-ring); --ui-shadow-sm: var(--dt-semantic-color-dark-shadow-sm); --ui-shadow-md: var(--dt-semantic-color-dark-shadow-md); --ui-shadow-lg: var(--dt-semantic-color-dark-shadow-lg); --ui-shadow-xl: var(--dt-semantic-color-dark-shadow-xl); --ui-shadow-window: var(--dt-semantic-color-dark-shadow-window); --ui-shadow-popover: var(--dt-semantic-color-dark-shadow-popover); --ui-shadow-accent: var(--dt-semantic-color-dark-shadow-accent); } /* Độ trong suốt do material quyết định, và thang alpha DUY NHẤT là --a-shell / --a-header / --a-content khai báo ở styles.css:329-354. Trước đây file này khai báo thang thứ hai (--ui-shell-alpha 1/.94/.82/.72) rồi dùng nó thay cho thang gốc (1/.92/.70/.52). Biên độ bị nén từ 48% xuống 28%, bốn bậc nằm sát nhau 6-12% nên nhìn như nhau. Đã bỏ hẳn thang thứ hai; mọi nơi dùng lại --a-*. */ /* Thẻ nổi (BA 11/10/2026): rail là thẻ tách khỏi nền bàn bằng khe 8px + tông thẻ (--ux-frame trên --ux-desk), Sáng không hình nền thêm --ui-float-shadow. Không viền: khe đã là cách tách duy nhất (luật "một cách tách"). Liền mạch cũng không viền. */ html[data-material] { --ui-rail-divider: transparent; } } /* @layer legacy */