/* Generated by scripts/build-design-tokens.js. Do not edit by hand. */ :root { --dt-annotation-arrow-curve-preset: 0.4; --dt-annotation-arrow-curve-snap: 0.03; --dt-annotation-arrow-head-min: 10px; --dt-annotation-arrow-head-ratio: 3; --dt-annotation-asset-scale: 1.25; --dt-annotation-border-max-width: 80px; --dt-annotation-color-black: #111827; --dt-annotation-color-blue: #2563eb; --dt-annotation-color-default: #ff0000; --dt-annotation-color-green: #22c55e; --dt-annotation-color-halo: #ffffff; --dt-annotation-color-orange: #f97316; --dt-annotation-color-purple: #8b5cf6; --dt-annotation-color-red: #ff0000; --dt-annotation-color-shape-label: #1e293b; --dt-annotation-color-white: #ffffff; --dt-annotation-color-yellow: #facc15; --dt-annotation-guide-color: #38bdf8; --dt-annotation-guide-dash: 6px; --dt-annotation-guide-emphasis-fill-opacity: 0.32; --dt-annotation-guide-emphasis-width: 2px; --dt-annotation-guide-fill-opacity: 0.18; --dt-annotation-guide-gap: 4px; --dt-annotation-guide-text-padding: 4px; --dt-annotation-guide-width: 1.5px; --dt-annotation-highlight-opacity: 0.4; --dt-annotation-highlight-width: 16px; --dt-annotation-opacity-scale-01: 1; --dt-annotation-opacity-scale-02: 0.8; --dt-annotation-opacity-scale-03: 0.6; --dt-annotation-opacity-scale-04: 0.4; --dt-annotation-opacity-scale-05: 0.2; --dt-annotation-scale-max: 3; --dt-annotation-scale-min: 1; --dt-annotation-scale-reference-long-side: 1920; --dt-annotation-scale-step: 0.25; --dt-annotation-shape-height: 135px; --dt-annotation-shape-width: 240px; --dt-annotation-step-diameter: 44px; --dt-annotation-step-font-size: 22px; --dt-annotation-stroke-arrow: 6px; --dt-annotation-stroke-bold: 8px; --dt-annotation-stroke-dash-ratio: 3; --dt-annotation-stroke-default: 4px; --dt-annotation-stroke-gap-ratio: 2; --dt-annotation-stroke-heavy: 12px; --dt-annotation-stroke-range-max: 36px; --dt-annotation-stroke-range-min: 1px; --dt-annotation-stroke-regular: 4px; --dt-annotation-stroke-scale-01: 1px; --dt-annotation-stroke-scale-02: 2px; --dt-annotation-stroke-scale-03: 3px; --dt-annotation-stroke-scale-04: 4px; --dt-annotation-stroke-scale-05: 6px; --dt-annotation-stroke-scale-06: 8px; --dt-annotation-stroke-scale-07: 12px; --dt-annotation-stroke-scale-08: 16px; --dt-annotation-stroke-scale-09: 24px; --dt-annotation-stroke-thin: 2px; --dt-annotation-text-box-width: 320px; --dt-annotation-text-font-family: 'Segoe UI', Arial, sans-serif; --dt-annotation-text-font-weight: 500; --dt-annotation-text-halo-width: 4px; --dt-annotation-text-line-height: 1.2; --dt-annotation-text-scale-01: 12px; --dt-annotation-text-scale-02: 14px; --dt-annotation-text-scale-03: 16px; --dt-annotation-text-scale-04: 18px; --dt-annotation-text-scale-05: 20px; --dt-annotation-text-scale-06: 24px; --dt-annotation-text-scale-07: 28px; --dt-annotation-text-scale-08: 32px; --dt-annotation-text-scale-09: 40px; --dt-annotation-text-scale-10: 48px; --dt-annotation-text-scale-11: 64px; --dt-annotation-text-scale-12: 72px; --dt-annotation-text-scale-13: 96px; --dt-annotation-text-size-default: 24px; --dt-annotation-text-size-lg: 32px; --dt-annotation-text-size-md: 24px; --dt-annotation-text-size-shape-label: 24px; --dt-annotation-text-size-sm: 20px; --dt-annotation-text-size-xl: 48px; --dt-color-base-black: #000000; --dt-color-base-white: #ffffff; --dt-color-channel-black: 0, 0, 0; --dt-color-channel-neutral: 128, 128, 128; --dt-color-channel-scrim: 10, 14, 26; --dt-color-channel-shadow-light: 0, 0, 0; --dt-color-channel-white: 255, 255, 255; --dt-component-badge-height: 20px; --dt-component-badge-padding-inline: 4px; --dt-component-button-compact-height: 24px; --dt-component-button-radius: 8px; --dt-component-button-secondary-active-alpha: 0.18; --dt-component-button-secondary-fill-alpha: 0.1; --dt-component-button-secondary-hover-alpha: 0.14; --dt-component-button-standard-height: 32px; --dt-component-calendar-item-interaction-ring-width: 1px; --dt-component-calendar-item-priority-edge-width: 4px; --dt-component-calendar-outlook-pane-width: 292px; --dt-component-calendar-today-compact-min-height: 520px; --dt-component-card-gap: 8px; --dt-component-card-note-width: 260px; --dt-component-card-padding: 12px; --dt-component-card-radius: 12px; --dt-component-dialog-compose-max-width: 640px; --dt-component-dialog-edge-gap: 16px; --dt-component-dialog-extra-large-max-width: 1100px; --dt-component-dialog-footer-height: 64px; --dt-component-dialog-header-height: 56px; --dt-component-dialog-large-max-width: 800px; --dt-component-dialog-medium-max-width: 600px; --dt-component-dialog-padding: 20px; --dt-component-dialog-radius: 16px; --dt-component-dialog-small-max-width: 440px; --dt-component-drawer-archive-width: 380px; --dt-component-drawer-task-center-offset: 390px; --dt-component-drawer-task-width: 780px; --dt-component-editor-content-min-height: 240px; --dt-component-editor-draft-height: 320px; --dt-component-editor-empty-min-height: 220px; --dt-component-editor-feedback-min-height: 164px; --dt-component-editor-frame-min-height: 280px; --dt-component-editor-rich-text-min-height: 236px; --dt-component-empty-state-content-max-width: 360px; --dt-component-empty-state-gap: 12px; --dt-component-field-compact-width: 168px; --dt-component-field-gap: 4px; --dt-component-field-height: 32px; --dt-component-field-padding-inline: 12px; --dt-component-field-radius: 8px; --dt-component-flat-surface-divider-width: 1px; --dt-component-flat-surface-gap: 0px; --dt-component-flat-surface-group-radius: 12px; --dt-component-flat-surface-item-radius: 8px; --dt-component-flat-surface-radius-inner: 0px; --dt-component-flat-surface-radius-outer: 12px; --dt-component-flat-surface-row-inset: 4px; --dt-component-flat-surface-section-divider: 1px; --dt-component-flat-surface-today-inset: 2px; --dt-component-flat-surface-today-radius: 12px; --dt-component-focus-ring-offset: 2px; --dt-component-focus-ring-width: 2px; --dt-component-header-cluster-control-inset: 0px; --dt-component-header-cluster-padding: 0px; --dt-component-header-control-size: 24px; --dt-component-header-height: 32px; --dt-component-header-icon-button-size: 24px; --dt-component-header-icon-size: 16px; --dt-component-header-pane-height: 44px; --dt-component-header-view-segment-item-width: 36px; --dt-component-header-week-picker-width: 136px; --dt-component-list-row-dense-min-height: 28px; --dt-component-list-row-gap: 8px; --dt-component-list-row-min-height: 32px; --dt-component-list-row-padding-inline: 12px; --dt-component-nav-list-gap: 0px; --dt-component-nav-list-group-gap: 8px; --dt-component-nav-list-height: 28px; --dt-component-nav-list-height-two-line: 44px; --dt-component-nav-list-indent-step: 16px; --dt-component-nav-list-indicator-height: 16px; --dt-component-nav-list-indicator-width: 3px; --dt-component-nav-list-inset-inline: 4px; --dt-component-nav-list-padding-inline: 12px; --dt-component-nav-list-selected-fill-alpha: 0.08; --dt-component-navigation-item-gap: 8px; --dt-component-navigation-item-height: 68px; --dt-component-navigation-item-height-collapsed: 40px; --dt-component-navigation-item-height-compact: 62px; --dt-component-navigation-item-min-height: 44px; --dt-component-navigation-item-padding-block: 3px; --dt-component-navigation-item-padding-inline: 1px; --dt-component-navigation-item-radius: 10px; --dt-component-navigation-label-height: 22px; --dt-component-navigation-rail-width: 66px; --dt-component-pane-detail-large-width: 780px; --dt-component-pane-detail-medium-width: 480px; --dt-component-pane-detail-small-width: 360px; --dt-component-pane-list-max-width: 380px; --dt-component-pane-list-min-width: 200px; --dt-component-pane-list-width: 260px; --dt-component-panel-gap: 8px; --dt-component-panel-padding: 16px; --dt-component-panel-radius: 12px; --dt-component-popover-avatar-menu-width: 260px; --dt-component-popover-capture-min-width: 260px; --dt-component-popover-command-width: 260px; --dt-component-popover-compact-width: 200px; --dt-component-popover-filter-width: 320px; --dt-component-popover-large-width: 320px; --dt-component-popover-medium-width: 260px; --dt-component-popover-note-menu-min-width: 260px; --dt-component-popover-priority-min-width: 320px; --dt-component-popover-project-picker-min-width: 260px; --dt-component-popover-quick-action-width: 320px; --dt-component-popover-section-menu-min-width: 200px; --dt-component-popover-small-width: 200px; --dt-component-popover-standard-width: 260px; --dt-component-popover-wide-width: 320px; --dt-component-premium-visual-card-min-height: 260px; --dt-component-premium-visual-checkout-qr-border: rgba(217, 119, 6, .35); --dt-component-premium-visual-checkout-qr-shadow: 0 14px 30px rgba(217, 119, 6, .18); --dt-component-premium-visual-compare-min-width: 420px; --dt-component-premium-visual-dark-card-background: rgba(255, 200, 120, .05); --dt-component-premium-visual-dark-card-border: rgba(255, 200, 120, .12); --dt-component-premium-visual-dark-checkout-qr-border: rgba(250, 204, 120, .3); --dt-component-premium-visual-dark-checkout-qr-shadow: 0 14px 30px rgba(0, 0, 0, .35); --dt-component-premium-visual-dark-offer-background: rgba(230, 150, 40, .12); --dt-component-premium-visual-dark-offer-border: rgba(255, 200, 120, .14); --dt-component-premium-visual-dark-page-background: radial-gradient(circle at 92% 4%, rgba(230, 150, 40, .16), transparent 24%), #211a12; --dt-component-premium-visual-dark-plan-featured-background: linear-gradient(160deg, rgba(250, 204, 120, .16), rgba(124, 63, 13, .1)); --dt-component-premium-visual-dark-plan-featured-border: rgba(250, 204, 120, .32); --dt-component-premium-visual-donation-background: radial-gradient(circle at 86% 22%, rgba(255, 200, 120, .25), transparent 29%), linear-gradient(135deg, #3a1d09, #8a4a10); --dt-component-premium-visual-donation-border: rgba(230, 150, 40, .25); --dt-component-premium-visual-donation-strong: #fff8ef; --dt-component-premium-visual-donation-text: #f3ddbc; --dt-component-premium-visual-halo-background: radial-gradient(circle at 35% 25%, #ffd28a, #d9800a 64%, #7a3c07); --dt-component-premium-visual-halo-border: rgba(255, 214, 150, .3); --dt-component-premium-visual-halo-shadow: 0 0 0 24px rgba(230, 150, 40, .09), 0 18px 36px rgba(50, 24, 4, .3); --dt-component-premium-visual-halo-size: 190px; --dt-component-premium-visual-on-orb: #3a1d04; --dt-component-premium-visual-orb-background: linear-gradient(145deg, #f0a94e, #d97706); --dt-component-premium-visual-orb-border: rgba(217, 119, 6, .35); --dt-component-premium-visual-orb-shadow: 0 12px 24px rgba(180, 91, 8, .28); --dt-component-premium-visual-pill-background: rgba(255,255,255,.10); --dt-component-premium-visual-pill-border: rgba(255, 214, 150, .22); --dt-component-premium-visual-pill-text: #ffe9c7; --dt-component-premium-visual-plan-featured-background: linear-gradient(160deg, rgba(217, 119, 6, .14), rgba(250, 204, 120, .05)); --dt-component-premium-visual-plan-featured-badge-background: linear-gradient(135deg, #f59e0b, #d97706); --dt-component-premium-visual-plan-featured-border: rgba(217, 119, 6, .38); --dt-component-premium-visual-progress-fill: #ffb454; --dt-component-premium-visual-progress-track: rgba(255,255,255,.16); --dt-component-premium-visual-project-card-width: 188px; --dt-component-premium-visual-qr-border: rgba(255,255,255,.4); --dt-component-premium-visual-qr-frame-size: 264px; --dt-component-premium-visual-qr-shadow: 0 18px 35px rgba(40, 18, 3, .32); --dt-component-premium-visual-qr-size: 236px; --dt-component-premium-visual-showcase-background: radial-gradient(circle at 86% 15%, rgba(250, 204, 120, .35), transparent 28%), linear-gradient(135deg, #2b1608, #7c3f0d); --dt-component-premium-visual-showcase-border: rgba(230, 150, 40, .28); --dt-component-premium-visual-showcase-min-height: 290px; --dt-component-premium-visual-showcase-visual-compact-min-height: 205px; --dt-component-premium-visual-showcase-visual-min-height: 222px; --dt-component-premium-visual-text-body: #f0dcc0; --dt-component-premium-visual-text-kicker: #ffd9a0; --dt-component-premium-visual-visual-line: #c97a1c; --dt-component-premium-visual-visual-line-accent: #ffb454; --dt-component-premium-visual-visual-muted: #e8c99a; --dt-component-premium-visual-visual-note-background: #ffe1ad; --dt-component-premium-visual-visual-note-text: #5a3410; --dt-component-premium-visual-visual-text: #fff6ea; --dt-component-privacy-blur-radius: 6px; --dt-component-recording-countdown-font-size: 96px; --dt-component-recording-countdown-size: 160px; --dt-component-resizer-drag-line-width: 2px; --dt-component-rhythm-group: 16px; --dt-component-rhythm-inline: 8px; --dt-component-rhythm-panel: 16px; --dt-component-rhythm-reading-measure: 720px; --dt-component-rhythm-stack: 8px; --dt-component-scrollbar-idle-delay: 2000ms; --dt-component-scrollbar-width: 3px; --dt-component-search-expanded-width: 160px; --dt-component-search-note-width: 220px; --dt-component-search-quick-note-composer-min-width: 432px; --dt-component-settings-choice-max-width: 200px; --dt-component-settings-content-max-width: 1100px; --dt-component-settings-expanded-height: 660px; --dt-component-settings-expanded-width: 820px; --dt-component-settings-menu-width: 292px; --dt-component-settings-nav-item-height: 28px; --dt-component-settings-sidebar-width: 264px; --dt-component-sync-action-width: 168px; --dt-component-workspace-list-peek-min-width: 210px; --dt-component-workspace-weekly-card-min-height: 220px; --dt-dimension-control-compact: 24px; --dt-dimension-control-header: 32px; --dt-dimension-control-header-icon: 32px; --dt-dimension-control-micro: 24px; --dt-dimension-control-standard: 32px; --dt-dimension-control-toolbar-dense: 24px; --dt-dimension-header-search-min: 260px; --dt-dimension-icon-context: 16px; --dt-dimension-icon-control: 16px; --dt-dimension-icon-dense: 16px; --dt-dimension-icon-header: 20px; --dt-dimension-icon-lg: 24px; --dt-dimension-icon-md: 20px; --dt-dimension-icon-micro: 12px; --dt-dimension-icon-navigation: 24px; --dt-dimension-icon-prominent: 20px; --dt-dimension-icon-sm: 16px; --dt-dimension-icon-stroke: 1.75; --dt-dimension-icon-xs: 12px; --dt-dimension-layout-104: 104px; --dt-dimension-layout-1040: 1040px; --dt-dimension-layout-112: 112px; --dt-dimension-layout-1120: 1120px; --dt-dimension-layout-120: 120px; --dt-dimension-layout-1200: 1200px; --dt-dimension-layout-128: 128px; --dt-dimension-layout-1280: 1280px; --dt-dimension-layout-136: 136px; --dt-dimension-layout-144: 144px; --dt-dimension-layout-152: 152px; --dt-dimension-layout-160: 160px; --dt-dimension-layout-176: 176px; --dt-dimension-layout-192: 192px; --dt-dimension-layout-208: 208px; --dt-dimension-layout-224: 224px; --dt-dimension-layout-240: 240px; --dt-dimension-layout-256: 256px; --dt-dimension-layout-272: 272px; --dt-dimension-layout-288: 288px; --dt-dimension-layout-304: 304px; --dt-dimension-layout-320: 320px; --dt-dimension-layout-360: 360px; --dt-dimension-layout-400: 400px; --dt-dimension-layout-440: 440px; --dt-dimension-layout-48: 48px; --dt-dimension-layout-480: 480px; --dt-dimension-layout-520: 520px; --dt-dimension-layout-56: 56px; --dt-dimension-layout-560: 560px; --dt-dimension-layout-600: 600px; --dt-dimension-layout-64: 64px; --dt-dimension-layout-640: 640px; --dt-dimension-layout-680: 680px; --dt-dimension-layout-72: 72px; --dt-dimension-layout-720: 720px; --dt-dimension-layout-80: 80px; --dt-dimension-layout-800: 800px; --dt-dimension-layout-88: 88px; --dt-dimension-layout-880: 880px; --dt-dimension-layout-96: 96px; --dt-dimension-layout-960: 960px; --dt-dimension-radius-circle: 50%; --dt-dimension-radius-control: 8px; --dt-dimension-radius-full: 9999px; --dt-dimension-radius-item: 10px; --dt-dimension-radius-lg: 12px; --dt-dimension-radius-md: 8px; --dt-dimension-radius-panel: 12px; --dt-dimension-radius-sm: 4px; --dt-dimension-radius-window: 16px; --dt-dimension-radius-xl: 16px; --dt-dimension-radius-xs: 2px; --dt-dimension-rail-compact: 48px; --dt-dimension-rail-expanded: 200px; --dt-dimension-resizer-hit: 24px; --dt-dimension-resizer-hit-half: 12px; --dt-dimension-resizer-line: 1px; --dt-dimension-row-list: 32px; --dt-dimension-row-list-dense: 28px; --dt-dimension-size-dense: 28px; --dt-dimension-size-lg: 40px; --dt-dimension-size-md: 32px; --dt-dimension-size-sm: 24px; --dt-dimension-size-touch: 44px; --dt-dimension-space-0: 0px; --dt-dimension-space-0-5: 2px; --dt-dimension-space-1: 4px; --dt-dimension-space-10: 40px; --dt-dimension-space-12: 48px; --dt-dimension-space-1-5: 6px; --dt-dimension-space-2: 8px; --dt-dimension-space-2-5: 10px; --dt-dimension-space-3: 12px; --dt-dimension-space-3-5: 14px; --dt-dimension-space-4: 16px; --dt-dimension-space-4-5: 18px; --dt-dimension-space-5: 20px; --dt-dimension-space-6: 24px; --dt-dimension-space-8: 32px; --dt-dimension-space-px: 1px; --dt-dimension-stroke-thick: 2px; --dt-dimension-stroke-thicker: 3px; --dt-dimension-stroke-thickest: 4px; --dt-dimension-stroke-thin: 1px; --dt-font-family-ui: Segoe UI, system-ui, -apple-system, Roboto, Arial, sans-serif; --dt-layout-calendar-compact-day-min-width: 144px; --dt-layout-calendar-compact-month-day-min-width: 76px; --dt-layout-layer-alert: 1200; --dt-layout-layer-header: 20; --dt-layout-layer-local-control: 5; --dt-layout-layer-local-pane: 10; --dt-layout-layer-local-pane-control: 20; --dt-layout-layer-local-pane-top: 30; --dt-layout-layer-local-raised: 2; --dt-layout-layer-local-sticky: 3; --dt-layout-layer-modal: 1000; --dt-layout-layer-notification: 800; --dt-layout-layer-popover: 100; --dt-layout-layer-system: 1300; --dt-layout-layer-toast: 1400; --dt-layout-reading-measure: 64ch; --dt-layout-shell-compact-min-width: 560px; --dt-layout-shell-gap: 8px; --dt-layout-shell-large-text-min-width: 660px; --dt-layout-shell-medium-min-width: 760px; --dt-layout-shell-seamless-inset: 8px; --dt-layout-shell-wide-min-width: 1040px; --dt-layout-touch-target-comfortable: 44px; --dt-layout-touch-target-minimum: 24px; --dt-material-acrylic-alpha-content: 0.88; --dt-material-acrylic-alpha-header: 0.78; --dt-material-acrylic-alpha-shell: 0.7; --dt-material-acrylic-blur: 20px; --dt-material-acrylic-saturate: 1.4; --dt-material-acrylic-scrim: 0.5; --dt-material-acrylic-scrim-dark: 0.45; --dt-material-acrylic-t: 0.55; --dt-material-acrylic-wallpaper-blur: 24px; --dt-material-acrylic-wallpaper-chrome: 0.92; --dt-material-acrylic-wallpaper-plate: 0.55; --dt-material-acrylic-wallpaper-text: 0.95; --dt-material-adaptive-floor-acrylic: 0.65; --dt-material-adaptive-floor-glass: 0.4; --dt-material-adaptive-min-contrast: 4.6; --dt-material-adaptive-step: 0.02; --dt-material-focus-alpha-content: 0.98; --dt-material-focus-alpha-header: 0.92; --dt-material-focus-alpha-shell: 0.92; --dt-material-focus-blur: 8px; --dt-material-focus-saturate: 1.1; --dt-material-focus-scrim: 0.62; --dt-material-focus-scrim-dark: 0.55; --dt-material-focus-t: 0.25; --dt-material-focus-wallpaper-blur: 12px; --dt-material-focus-wallpaper-chrome: 0.97; --dt-material-focus-wallpaper-plate: 0.85; --dt-material-focus-wallpaper-text: 1; --dt-material-glass-alpha-content: 0.78; --dt-material-glass-alpha-header: 0.64; --dt-material-glass-alpha-shell: 0.52; --dt-material-glass-blur: 30px; --dt-material-glass-saturate: 1.6; --dt-material-glass-scrim: 0.38; --dt-material-glass-scrim-dark: 0.35; --dt-material-glass-t: 0.8; --dt-material-glass-wallpaper-blur: 0px; --dt-material-glass-wallpaper-chrome: 0.94; --dt-material-glass-wallpaper-chrome-dark: 0.97; --dt-material-glass-wallpaper-plate: 0.15; --dt-material-glass-wallpaper-text: 0.94; --dt-material-glass-wallpaper-text-dark: 0.97; --dt-material-raised-floor-with-wallpaper: 0.72; --dt-material-solid-alpha-content: 1; --dt-material-solid-alpha-header: 1; --dt-material-solid-alpha-shell: 1; --dt-material-solid-blur: 0px; --dt-material-solid-saturate: 1; --dt-material-solid-scrim: 0; --dt-material-solid-t: 0; --dt-material-solid-wallpaper-blur: 0px; --dt-material-solid-wallpaper-chrome: 1; --dt-material-solid-wallpaper-plate: 1; --dt-material-solid-wallpaper-text: 1; --dt-motion-distance-enter: 8px; --dt-motion-distance-subtle: 4px; --dt-motion-duration-base: 180ms; --dt-motion-duration-fast: 120ms; --dt-motion-duration-instant: 80ms; --dt-motion-duration-page: 280ms; --dt-motion-duration-pulse: 1500ms; --dt-motion-duration-slow: 280ms; --dt-motion-duration-spin: 750ms; --dt-motion-duration-standard: 180ms; --dt-motion-easing-enter: cubic-bezier(.1, .9, .2, 1); --dt-motion-easing-exit: cubic-bezier(.7, 0, 1, .5); --dt-motion-easing-standard: cubic-bezier(.2, .8, .2, 1); --dt-motion-interaction-press-scale: 0.98; --dt-motion-interaction-stable-transform: none; --dt-motion-scale-dialog-enter: 0.96; --dt-motion-scale-popover-enter: 0.98; --dt-semantic-color-chrome-ink-dark-active: rgba(31, 30, 29, .10); --dt-semantic-color-chrome-ink-dark-fg: #1f1e1d; --dt-semantic-color-chrome-ink-dark-fg-muted: rgba(31, 30, 29, .72); --dt-semantic-color-chrome-ink-dark-field: rgba(31, 30, 29, .06); --dt-semantic-color-chrome-ink-dark-hover: rgba(31, 30, 29, .06); --dt-semantic-color-chrome-ink-dark-line: rgba(31, 30, 29, .14); --dt-semantic-color-chrome-ink-light-active: rgba(255, 255, 255, .22); --dt-semantic-color-chrome-ink-light-fg: #ffffff; --dt-semantic-color-chrome-ink-light-fg-muted: rgba(255, 255, 255, .78); --dt-semantic-color-chrome-ink-light-field: rgba(255, 255, 255, .16); --dt-semantic-color-chrome-ink-light-hover: rgba(255, 255, 255, .14); --dt-semantic-color-chrome-ink-light-line: rgba(255, 255, 255, .24); --dt-semantic-color-chrome-palette-blue: #2563eb; --dt-semantic-color-chrome-palette-graphite: #374151; --dt-semantic-color-chrome-palette-green: #15803d; --dt-semantic-color-chrome-palette-orange: #c2410c; --dt-semantic-color-chrome-palette-pink: #be185d; --dt-semantic-color-chrome-palette-purple: #7c3aed; --dt-semantic-color-chrome-palette-white: #ffffff; --dt-semantic-color-chrome-palette-yellow: #facc15; --dt-semantic-color-dark-action-accent: #6aaefc; --dt-semantic-color-dark-action-accent-rgb: 106, 174, 252; --dt-semantic-color-dark-action-accent-solid: #2b74c4; --dt-semantic-color-dark-action-accent-solid-rgb: 43, 116, 196; --dt-semantic-color-dark-action-active: color-mix(in srgb, #6aaefc 10%, transparent); --dt-semantic-color-dark-action-hover: rgba(255, 255, 255, .06); --dt-semantic-color-dark-action-on-accent: #ffffff; --dt-semantic-color-dark-border-control: rgba(232, 234, 237, calc(.16 + .08 * var(--t))); --dt-semantic-color-dark-border-control-hover: rgba(232, 234, 237, .36); --dt-semantic-color-dark-border-control-strong: rgba(232, 234, 237, .46); --dt-semantic-color-dark-border-default: rgba(232, 234, 237, calc(.11 + .03 * var(--t))); --dt-semantic-color-dark-border-divider: rgba(232, 234, 237, calc(.07 + .02 * var(--t))); --dt-semantic-color-dark-border-divider-static: rgba(232, 234, 237, .08); --dt-semantic-color-dark-border-focus: #e8eaed; --dt-semantic-color-dark-border-hover: #000000; --dt-semantic-color-dark-brand-calendar: #ff9b6a; --dt-semantic-color-dark-brand-google: #8ab4f8; --dt-semantic-color-dark-brand-outlook: #7ec8f0; --dt-semantic-color-dark-brand-premium: #f4c95d; --dt-semantic-color-dark-brand-premium-ink: #f4c95d; --dt-semantic-color-dark-brand-teams: #a6a8ff; --dt-semantic-color-dark-brand-webex: #65d2aa; --dt-semantic-color-dark-brand-zoom: #74b7ff; --dt-semantic-color-dark-brand-rgb-calendar: 255, 155, 106; --dt-semantic-color-dark-brand-rgb-google: 138, 180, 248; --dt-semantic-color-dark-brand-rgb-outlook: 126, 200, 240; --dt-semantic-color-dark-brand-rgb-premium: 244, 201, 93; --dt-semantic-color-dark-brand-rgb-teams: 166, 168, 255; --dt-semantic-color-dark-brand-rgb-webex: 101, 210, 170; --dt-semantic-color-dark-brand-rgb-zoom: 116, 183, 255; --dt-semantic-color-dark-category-blue-bar: #38BDF8; --dt-semantic-color-dark-category-blue-bg: rgba(56, 189, 248, 0.18); --dt-semantic-color-dark-category-blue-fg: #BAE6FD; --dt-semantic-color-dark-category-green-bar: #4ADE80; --dt-semantic-color-dark-category-green-bg: rgba(74, 222, 128, 0.18); --dt-semantic-color-dark-category-green-fg: #BBF7D0; --dt-semantic-color-dark-category-orange-bar: #FB923C; --dt-semantic-color-dark-category-orange-bg: rgba(251, 146, 60, 0.18); --dt-semantic-color-dark-category-orange-fg: #FED7AA; --dt-semantic-color-dark-category-pink-bar: #FB7185; --dt-semantic-color-dark-category-pink-bg: rgba(251, 113, 133, 0.18); --dt-semantic-color-dark-category-pink-fg: #FECDD3; --dt-semantic-color-dark-category-purple-bar: #A78BFA; --dt-semantic-color-dark-category-purple-bg: rgba(167, 139, 250, 0.18); --dt-semantic-color-dark-category-purple-fg: #DDD6FE; --dt-semantic-color-dark-chrome-neutral-surface: #16171a; --dt-semantic-color-dark-focus-ring: #6aaefc; --dt-semantic-color-dark-ink: 255, 255, 255; --dt-semantic-color-dark-module-tone-admin: #f57373; --dt-semantic-color-dark-module-tone-art: #46c3de; --dt-semantic-color-dark-module-tone-capture: #43c9ba; --dt-semantic-color-dark-module-tone-dashboard: #40c99a; --dt-semantic-color-dark-module-tone-note: #b393f9; --dt-semantic-color-dark-module-tone-paint: #f277ae; --dt-semantic-color-dark-module-tone-premium: #e2b73f; --dt-semantic-color-dark-module-tone-project: #93a0f5; --dt-semantic-color-dark-module-tone-quick-note: #efb254; --dt-semantic-color-dark-module-tone-settings: #b6c3d5; --dt-semantic-color-dark-module-tone-task: #7ba7f8; --dt-semantic-color-dark-module-tone-rgb-admin: 245, 115, 115; --dt-semantic-color-dark-module-tone-rgb-art: 70, 195, 222; --dt-semantic-color-dark-module-tone-rgb-capture: 67, 201, 186; --dt-semantic-color-dark-module-tone-rgb-dashboard: 64, 201, 154; --dt-semantic-color-dark-module-tone-rgb-note: 179, 147, 249; --dt-semantic-color-dark-module-tone-rgb-paint: 242, 119, 174; --dt-semantic-color-dark-module-tone-rgb-premium: 226, 183, 63; --dt-semantic-color-dark-module-tone-rgb-project: 147, 160, 245; --dt-semantic-color-dark-module-tone-rgb-quick-note: 239, 178, 84; --dt-semantic-color-dark-module-tone-rgb-settings: 182, 195, 213; --dt-semantic-color-dark-module-tone-rgb-task: 123, 167, 248; --dt-semantic-color-dark-note-palette-canvas-black: #111318; --dt-semantic-color-dark-note-palette-canvas-blue: #20272f; --dt-semantic-color-dark-note-palette-canvas-gray: #242628; --dt-semantic-color-dark-note-palette-canvas-green: #212824; --dt-semantic-color-dark-note-palette-canvas-pink: #2d2327; --dt-semantic-color-dark-note-palette-canvas-purple: #26232d; --dt-semantic-color-dark-note-palette-canvas-white: #2a2b2e; --dt-semantic-color-dark-note-palette-canvas-yellow: #2c2a23; --dt-semantic-color-dark-note-palette-on-dark: #f5f7fa; --dt-semantic-color-dark-note-palette-on-dark-muted: #d7dbe2; --dt-semantic-color-dark-note-palette-swatch-black: #111318; --dt-semantic-color-dark-note-palette-swatch-blue: #2d3844; --dt-semantic-color-dark-note-palette-swatch-gray: #34373a; --dt-semantic-color-dark-note-palette-swatch-green: #2d3731; --dt-semantic-color-dark-note-palette-swatch-pink: #3c2e34; --dt-semantic-color-dark-note-palette-swatch-purple: #363040; --dt-semantic-color-dark-note-palette-swatch-yellow: #3d392e; --dt-semantic-color-dark-shadow-accent: 0 2px 8px rgba(106, 174, 252, .35); --dt-semantic-color-dark-shadow-lg: 0 14px 36px rgba(0, 0, 0, .40); --dt-semantic-color-dark-shadow-md: 0 4px 16px rgba(0, 0, 0, .35); --dt-semantic-color-dark-shadow-popover: 0 16px 38px rgba(0, 0, 0, .40); --dt-semantic-color-dark-shadow-sm: 0 1px 3px rgba(0, 0, 0, .30), 0 1px 2px rgba(0, 0, 0, .20); --dt-semantic-color-dark-shadow-text: 0 1px 3px rgba(0, 0, 0, calc(.55 * var(--shade-k))); --dt-semantic-color-dark-shadow-window: 0 18px 48px rgba(0, 0, 0, .42); --dt-semantic-color-dark-shadow-xl: 0 24px 60px rgba(0, 0, 0, .50); --dt-semantic-color-dark-status-danger: #ff9b90; --dt-semantic-color-dark-status-danger-bg: #331a19; --dt-semantic-color-dark-status-danger-line: #5c2b28; --dt-semantic-color-dark-status-danger-rgb: 255, 155, 144; --dt-semantic-color-dark-status-danger-solid: #c42b21; --dt-semantic-color-dark-status-success: #7fd6ab; --dt-semantic-color-dark-status-success-bg: #12291f; --dt-semantic-color-dark-status-success-line: #24503b; --dt-semantic-color-dark-status-success-rgb: 127, 214, 171; --dt-semantic-color-dark-status-warning: #f0c274; --dt-semantic-color-dark-status-warning-bg: #2f2415; --dt-semantic-color-dark-status-warning-line: #52401f; --dt-semantic-color-dark-status-warning-rgb: 240, 194, 116; --dt-semantic-color-dark-surface-base: #1c1d21; --dt-semantic-color-dark-surface-fill: #2f3137; --dt-semantic-color-dark-surface-overlay: #33363d; --dt-semantic-color-dark-surface-raised: #232428; --dt-semantic-color-dark-surface-shell: #16171a; --dt-semantic-color-dark-surface-sunken: #16171a; --dt-semantic-color-dark-surface-rgb-base: 28, 29, 33; --dt-semantic-color-dark-surface-rgb-fill: 47, 49, 55; --dt-semantic-color-dark-surface-rgb-overlay: 51, 54, 61; --dt-semantic-color-dark-surface-rgb-raised: 35, 36, 40; --dt-semantic-color-dark-surface-rgb-shell: 22, 23, 26; --dt-semantic-color-dark-surface-rgb-sunken: 22, 23, 26; --dt-semantic-color-dark-text-muted: #a9afb8; --dt-semantic-color-dark-text-on-accent: #ffffff; --dt-semantic-color-dark-text-primary: #e3e5e8; --dt-semantic-color-dark-text-secondary: #c4c8ce; --dt-semantic-color-dark-tool-action: #FB923C; --dt-semantic-color-dark-tool-copy: #A78BFA; --dt-semantic-color-dark-tool-insert: #4ADE80; --dt-semantic-color-dark-tool-list: #38BDF8; --dt-semantic-color-dark-tool-nav-all: #A78BFA; --dt-semantic-color-dark-tool-nav-recent: #38BDF8; --dt-semantic-color-dark-tool-remove: #FB7185; --dt-semantic-color-dark-tool-swatch-highlight: #facc15; --dt-semantic-color-dark-tool-swatch-text: #FB7185; --dt-semantic-color-light-action-accent: #1d4ed8; --dt-semantic-color-light-action-accent-rgb: 29, 78, 216; --dt-semantic-color-light-action-accent-solid: #1d4ed8; --dt-semantic-color-light-action-accent-solid-rgb: 29, 78, 216; --dt-semantic-color-light-action-active: color-mix(in srgb, #1d4ed8 10%, transparent); --dt-semantic-color-light-action-hover: rgba(11, 16, 32, .06); --dt-semantic-color-light-action-on-accent: #ffffff; --dt-semantic-color-light-border-control: rgba(61, 58, 52, calc(.14 + .07 * var(--t))); --dt-semantic-color-light-border-control-hover: rgba(61, 58, 52, .36); --dt-semantic-color-light-border-control-strong: rgba(61, 58, 52, .58); --dt-semantic-color-light-border-default: rgba(61, 58, 52, calc(.16 + .03 * var(--t))); --dt-semantic-color-light-border-divider: rgba(61, 58, 52, calc(.06 + .02 * var(--t))); --dt-semantic-color-light-border-divider-static: rgba(61, 58, 52, .07); --dt-semantic-color-light-border-focus: #1f1e1d; --dt-semantic-color-light-border-hover: #000000; --dt-semantic-color-light-brand-calendar: #d96532; --dt-semantic-color-light-brand-google: #4285f4; --dt-semantic-color-light-brand-outlook: #0078d4; --dt-semantic-color-light-brand-premium: #b7791f; --dt-semantic-color-light-brand-premium-ink: #855710; --dt-semantic-color-light-brand-teams: #5b5fc7; --dt-semantic-color-light-brand-webex: #138a72; --dt-semantic-color-light-brand-zoom: #2d8cff; --dt-semantic-color-light-brand-rgb-calendar: 217, 101, 50; --dt-semantic-color-light-brand-rgb-google: 66, 133, 244; --dt-semantic-color-light-brand-rgb-outlook: 0, 120, 212; --dt-semantic-color-light-brand-rgb-premium: 183, 121, 31; --dt-semantic-color-light-brand-rgb-teams: 91, 95, 199; --dt-semantic-color-light-brand-rgb-webex: 19, 138, 114; --dt-semantic-color-light-brand-rgb-zoom: 45, 140, 255; --dt-semantic-color-light-category-blue-bar: #0284C7; --dt-semantic-color-light-category-blue-bg: #E0F2FE; --dt-semantic-color-light-category-blue-fg: #0369A1; --dt-semantic-color-light-category-green-bar: #16A34A; --dt-semantic-color-light-category-green-bg: #DCFCE7; --dt-semantic-color-light-category-green-fg: #15803D; --dt-semantic-color-light-category-orange-bar: #EA580C; --dt-semantic-color-light-category-orange-bg: #FFEDD5; --dt-semantic-color-light-category-orange-fg: #C2410C; --dt-semantic-color-light-category-pink-bar: #E11D48; --dt-semantic-color-light-category-pink-bg: #FEE2E2; --dt-semantic-color-light-category-pink-fg: #BE123C; --dt-semantic-color-light-category-purple-bar: #7C3AED; --dt-semantic-color-light-category-purple-bg: #EDE9FE; --dt-semantic-color-light-category-purple-fg: #6D28D9; --dt-semantic-color-light-chrome-neutral-surface: #e9ecef; --dt-semantic-color-light-focus-ring: #1d4ed8; --dt-semantic-color-light-ink: 11, 16, 32; --dt-semantic-color-light-module-tone-admin: #dc2626; --dt-semantic-color-light-module-tone-art: #0891b2; --dt-semantic-color-light-module-tone-capture: #0d9488; --dt-semantic-color-light-module-tone-dashboard: #059669; --dt-semantic-color-light-module-tone-note: #7c3aed; --dt-semantic-color-light-module-tone-paint: #db2777; --dt-semantic-color-light-module-tone-premium: #ca8a04; --dt-semantic-color-light-module-tone-project: #4338ca; --dt-semantic-color-light-module-tone-quick-note: #e08c07; --dt-semantic-color-light-module-tone-settings: #56657a; --dt-semantic-color-light-module-tone-task: #2563eb; --dt-semantic-color-light-module-tone-rgb-admin: 220, 38, 38; --dt-semantic-color-light-module-tone-rgb-art: 8, 145, 178; --dt-semantic-color-light-module-tone-rgb-capture: 13, 148, 136; --dt-semantic-color-light-module-tone-rgb-dashboard: 5, 150, 105; --dt-semantic-color-light-module-tone-rgb-note: 124, 58, 237; --dt-semantic-color-light-module-tone-rgb-paint: 219, 39, 119; --dt-semantic-color-light-module-tone-rgb-premium: 202, 138, 4; --dt-semantic-color-light-module-tone-rgb-project: 67, 56, 202; --dt-semantic-color-light-module-tone-rgb-quick-note: 224, 140, 7; --dt-semantic-color-light-module-tone-rgb-settings: 86, 101, 122; --dt-semantic-color-light-module-tone-rgb-task: 37, 99, 235; --dt-semantic-color-light-note-palette-canvas-black: #111318; --dt-semantic-color-light-note-palette-canvas-blue: #eef3f7; --dt-semantic-color-light-note-palette-canvas-gray: #f2f3f4; --dt-semantic-color-light-note-palette-canvas-green: #f0f5f1; --dt-semantic-color-light-note-palette-canvas-pink: #f8f1f2; --dt-semantic-color-light-note-palette-canvas-purple: #f3f1f7; --dt-semantic-color-light-note-palette-canvas-white: #ffffff; --dt-semantic-color-light-note-palette-canvas-yellow: #f8f6ed; --dt-semantic-color-light-note-palette-on-dark: #f5f7fa; --dt-semantic-color-light-note-palette-on-dark-muted: #d7dbe2; --dt-semantic-color-light-note-palette-swatch-black: #111318; --dt-semantic-color-light-note-palette-swatch-blue: #d7e2ea; --dt-semantic-color-light-note-palette-swatch-gray: #dadcde; --dt-semantic-color-light-note-palette-swatch-green: #d9e5db; --dt-semantic-color-light-note-palette-swatch-pink: #ebd9dc; --dt-semantic-color-light-note-palette-swatch-purple: #dfd9ea; --dt-semantic-color-light-note-palette-swatch-yellow: #eee8d2; --dt-semantic-color-light-shadow-accent: 0 2px 8px rgba(29, 78, 216, .35); --dt-semantic-color-light-shadow-lg: 0 12px 28px rgba(0, 0, 0, .12); --dt-semantic-color-light-shadow-md: 0 4px 12px rgba(0, 0, 0, .10); --dt-semantic-color-light-shadow-popover: 0 14px 34px rgba(0, 0, 0, .16); --dt-semantic-color-light-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04); --dt-semantic-color-light-shadow-text: 0 1px 2px rgba(255, 255, 255, calc(.85 * var(--shade-k))); --dt-semantic-color-light-shadow-window: 0 16px 42px rgba(0, 0, 0, .14); --dt-semantic-color-light-shadow-xl: 0 20px 48px rgba(0, 0, 0, .16); --dt-semantic-color-light-status-danger: #b42318; --dt-semantic-color-light-status-danger-bg: #fdeceb; --dt-semantic-color-light-status-danger-line: #f2c8c4; --dt-semantic-color-light-status-danger-rgb: 180, 35, 24; --dt-semantic-color-light-status-danger-solid: #b42318; --dt-semantic-color-light-status-success: #17694b; --dt-semantic-color-light-status-success-bg: #e4f4ec; --dt-semantic-color-light-status-success-line: #b9e0cd; --dt-semantic-color-light-status-success-rgb: 23, 105, 75; --dt-semantic-color-light-status-warning: #8a5f14; --dt-semantic-color-light-status-warning-bg: #fdf4e3; --dt-semantic-color-light-status-warning-line: #ecd9ae; --dt-semantic-color-light-status-warning-rgb: 138, 95, 20; --dt-semantic-color-light-surface-base: #f3f4f6; --dt-semantic-color-light-surface-fill: #eceef1; --dt-semantic-color-light-surface-overlay: #ffffff; --dt-semantic-color-light-surface-raised: #ffffff; --dt-semantic-color-light-surface-shell: #ffffff; --dt-semantic-color-light-surface-sunken: #f3f4f6; --dt-semantic-color-light-surface-rgb-base: 243, 244, 246; --dt-semantic-color-light-surface-rgb-fill: 236, 238, 241; --dt-semantic-color-light-surface-rgb-overlay: 255, 255, 255; --dt-semantic-color-light-surface-rgb-raised: 255, 255, 255; --dt-semantic-color-light-surface-rgb-shell: 255, 255, 255; --dt-semantic-color-light-surface-rgb-sunken: 243, 244, 246; --dt-semantic-color-light-text-muted: #5c5a55; --dt-semantic-color-light-text-on-accent: #ffffff; --dt-semantic-color-light-text-primary: #1f1e1d; --dt-semantic-color-light-text-secondary: #4a4842; --dt-semantic-color-light-tool-action: #C2410C; --dt-semantic-color-light-tool-copy: #6D28D9; --dt-semantic-color-light-tool-insert: #15803D; --dt-semantic-color-light-tool-list: #0369A1; --dt-semantic-color-light-tool-nav-all: #6D28D9; --dt-semantic-color-light-tool-nav-recent: #0369A1; --dt-semantic-color-light-tool-remove: #BE123C; --dt-semantic-color-light-tool-swatch-highlight: #facc15; --dt-semantic-color-light-tool-swatch-text: #E11D48; --dt-semantic-typography-body-font-size: 14px; --dt-semantic-typography-body-line-height: 1.45; --dt-semantic-typography-caption-font-size: 12px; --dt-semantic-typography-caption-line-height: 1.35; --dt-semantic-typography-title-font-size: 16px; --dt-semantic-typography-title-line-height: 1.2; --dt-typography-font-size-body: 14px; --dt-typography-font-size-body-large: 16px; --dt-typography-font-size-body-small: 14px; --dt-typography-font-size-caption: 12px; --dt-typography-font-size-display: 20px; --dt-typography-font-size-display-large: 28px; --dt-typography-font-size-headline: 24px; --dt-typography-font-size-hero: 36px; --dt-typography-font-size-micro: 11px; --dt-typography-font-size-overline: 12px; --dt-typography-font-size-title: 16px; --dt-typography-font-size-title-large: 20px; --dt-typography-line-height-body: 1.45; --dt-typography-line-height-snug: 1.35; --dt-typography-line-height-tight: 1.2; --dt-typography-weight-bold: 700; --dt-typography-weight-medium: 500; --dt-typography-weight-regular: 400; --dt-typography-weight-semibold: 600; --dt-ui-scale-large-factor: 1.25; } /* Mức kích thước Lớn (125%): mọi token chữ + hình học px nhân uiScale.large.factor. */ :root[data-ui-scale="large"] { --dt-component-badge-height: 24px; --dt-component-button-compact-height: 30px; --dt-component-button-radius: 10px; --dt-component-button-standard-height: 40px; --dt-component-calendar-outlook-pane-width: 364px; --dt-component-calendar-today-compact-min-height: 650px; --dt-component-card-gap: 10px; --dt-component-card-note-width: 324px; --dt-component-card-padding: 14px; --dt-component-card-radius: 14px; --dt-component-dialog-compose-max-width: 800px; --dt-component-dialog-edge-gap: 20px; --dt-component-dialog-footer-height: 80px; --dt-component-dialog-header-height: 70px; --dt-component-dialog-large-max-width: 1000px; --dt-component-dialog-medium-max-width: 750px; --dt-component-dialog-padding: 24px; --dt-component-dialog-radius: 20px; --dt-component-dialog-small-max-width: 550px; --dt-component-drawer-archive-width: 474px; --dt-component-drawer-task-center-offset: 488px; --dt-component-drawer-task-width: 974px; --dt-component-editor-content-min-height: 300px; --dt-component-editor-draft-height: 400px; --dt-component-editor-empty-min-height: 274px; --dt-component-editor-feedback-min-height: 204px; --dt-component-editor-frame-min-height: 350px; --dt-component-editor-rich-text-min-height: 294px; --dt-component-empty-state-content-max-width: 450px; --dt-component-empty-state-gap: 14px; --dt-component-field-compact-width: 210px; --dt-component-field-height: 40px; --dt-component-field-padding-inline: 14px; --dt-component-field-radius: 10px; --dt-component-flat-surface-group-radius: 14px; --dt-component-flat-surface-item-radius: 10px; --dt-component-flat-surface-radius-outer: 14px; --dt-component-flat-surface-today-radius: 14px; --dt-component-header-control-size: 30px; --dt-component-header-height: 40px; --dt-component-header-icon-button-size: 30px; --dt-component-header-icon-size: 20px; --dt-component-header-pane-height: 54px; --dt-component-header-view-segment-item-width: 44px; --dt-component-header-week-picker-width: 170px; --dt-component-list-row-dense-min-height: 34px; --dt-component-list-row-gap: 10px; --dt-component-list-row-min-height: 40px; --dt-component-list-row-padding-inline: 14px; --dt-component-nav-list-group-gap: 10px; --dt-component-nav-list-height: 34px; --dt-component-nav-list-height-two-line: 54px; --dt-component-nav-list-indent-step: 20px; --dt-component-nav-list-indicator-height: 20px; --dt-component-nav-list-indicator-width: 4px; --dt-component-nav-list-padding-inline: 14px; --dt-component-navigation-item-gap: 10px; --dt-component-navigation-item-height: 84px; --dt-component-navigation-item-height-collapsed: 50px; --dt-component-navigation-item-height-compact: 78px; --dt-component-navigation-item-min-height: 54px; --dt-component-navigation-item-padding-block: 4px; --dt-component-navigation-item-radius: 12px; --dt-component-navigation-label-height: 28px; --dt-component-navigation-rail-width: 82px; --dt-component-pane-detail-large-width: 974px; --dt-component-pane-detail-medium-width: 600px; --dt-component-pane-detail-small-width: 450px; --dt-component-pane-list-max-width: 474px; --dt-component-pane-list-min-width: 250px; --dt-component-pane-list-width: 324px; --dt-component-panel-gap: 10px; --dt-component-panel-padding: 20px; --dt-component-panel-radius: 14px; --dt-component-popover-avatar-menu-width: 324px; --dt-component-popover-capture-min-width: 324px; --dt-component-popover-command-width: 324px; --dt-component-popover-compact-width: 250px; --dt-component-popover-filter-width: 400px; --dt-component-popover-large-width: 400px; --dt-component-popover-medium-width: 324px; --dt-component-popover-note-menu-min-width: 324px; --dt-component-popover-priority-min-width: 400px; --dt-component-popover-project-picker-min-width: 324px; --dt-component-popover-quick-action-width: 400px; --dt-component-popover-section-menu-min-width: 250px; --dt-component-popover-small-width: 250px; --dt-component-popover-standard-width: 324px; --dt-component-popover-wide-width: 400px; --dt-component-premium-visual-card-min-height: 324px; --dt-component-premium-visual-compare-min-width: 524px; --dt-component-premium-visual-halo-size: 238px; --dt-component-premium-visual-project-card-width: 234px; --dt-component-premium-visual-qr-frame-size: 330px; --dt-component-premium-visual-qr-size: 294px; --dt-component-premium-visual-showcase-min-height: 362px; --dt-component-premium-visual-showcase-visual-compact-min-height: 256px; --dt-component-premium-visual-showcase-visual-min-height: 278px; --dt-component-recording-countdown-font-size: 120px; --dt-component-recording-countdown-size: 200px; --dt-component-rhythm-group: 20px; --dt-component-rhythm-inline: 10px; --dt-component-rhythm-panel: 20px; --dt-component-rhythm-reading-measure: 900px; --dt-component-rhythm-stack: 10px; --dt-component-scrollbar-width: 4px; --dt-component-search-expanded-width: 200px; --dt-component-search-note-width: 274px; --dt-component-search-quick-note-composer-min-width: 540px; --dt-component-settings-choice-max-width: 250px; --dt-component-settings-expanded-height: 824px; --dt-component-settings-expanded-width: 1024px; --dt-component-settings-menu-width: 364px; --dt-component-settings-nav-item-height: 34px; --dt-component-settings-sidebar-width: 330px; --dt-component-sync-action-width: 210px; --dt-component-workspace-list-peek-min-width: 262px; --dt-component-workspace-weekly-card-min-height: 274px; --dt-dimension-control-compact: 30px; --dt-dimension-control-header: 40px; --dt-dimension-control-header-icon: 40px; --dt-dimension-control-micro: 30px; --dt-dimension-control-standard: 40px; --dt-dimension-control-toolbar-dense: 30px; --dt-dimension-header-search-min: 324px; --dt-dimension-icon-context: 20px; --dt-dimension-icon-control: 20px; --dt-dimension-icon-dense: 20px; --dt-dimension-icon-header: 24px; --dt-dimension-icon-lg: 30px; --dt-dimension-icon-md: 24px; --dt-dimension-icon-micro: 14px; --dt-dimension-icon-navigation: 30px; --dt-dimension-icon-prominent: 24px; --dt-dimension-icon-sm: 20px; --dt-dimension-icon-xs: 14px; --dt-dimension-layout-104: 130px; --dt-dimension-layout-112: 140px; --dt-dimension-layout-120: 150px; --dt-dimension-layout-128: 160px; --dt-dimension-layout-136: 170px; --dt-dimension-layout-144: 180px; --dt-dimension-layout-152: 190px; --dt-dimension-layout-160: 200px; --dt-dimension-layout-176: 220px; --dt-dimension-layout-192: 240px; --dt-dimension-layout-208: 260px; --dt-dimension-layout-224: 280px; --dt-dimension-layout-240: 300px; --dt-dimension-layout-256: 320px; --dt-dimension-layout-272: 340px; --dt-dimension-layout-288: 360px; --dt-dimension-layout-304: 380px; --dt-dimension-layout-320: 400px; --dt-dimension-layout-360: 450px; --dt-dimension-layout-400: 500px; --dt-dimension-layout-440: 550px; --dt-dimension-layout-48: 60px; --dt-dimension-layout-480: 600px; --dt-dimension-layout-520: 650px; --dt-dimension-layout-56: 70px; --dt-dimension-layout-560: 700px; --dt-dimension-layout-600: 750px; --dt-dimension-layout-64: 80px; --dt-dimension-layout-640: 800px; --dt-dimension-layout-680: 850px; --dt-dimension-layout-72: 90px; --dt-dimension-layout-720: 900px; --dt-dimension-layout-80: 100px; --dt-dimension-layout-800: 1000px; --dt-dimension-layout-88: 110px; --dt-dimension-layout-880: 1100px; --dt-dimension-layout-96: 120px; --dt-dimension-layout-960: 1200px; --dt-dimension-radius-control: 10px; --dt-dimension-radius-item: 12px; --dt-dimension-radius-lg: 14px; --dt-dimension-radius-md: 10px; --dt-dimension-radius-panel: 14px; --dt-dimension-radius-window: 20px; --dt-dimension-radius-xl: 20px; --dt-dimension-rail-compact: 60px; --dt-dimension-rail-expanded: 250px; --dt-dimension-resizer-hit: 30px; --dt-dimension-resizer-hit-half: 14px; --dt-dimension-row-list: 40px; --dt-dimension-row-list-dense: 34px; --dt-dimension-size-dense: 34px; --dt-dimension-size-lg: 50px; --dt-dimension-size-md: 40px; --dt-dimension-size-sm: 30px; --dt-dimension-size-touch: 54px; --dt-dimension-space-10: 50px; --dt-dimension-space-12: 60px; --dt-dimension-space-1-5: 8px; --dt-dimension-space-2: 10px; --dt-dimension-space-2-5: 12px; --dt-dimension-space-3: 14px; --dt-dimension-space-3-5: 18px; --dt-dimension-space-4: 20px; --dt-dimension-space-4-5: 22px; --dt-dimension-space-5: 24px; --dt-dimension-space-6: 30px; --dt-dimension-space-8: 40px; --dt-layout-calendar-compact-day-min-width: 180px; --dt-layout-calendar-compact-month-day-min-width: 94px; --dt-layout-touch-target-comfortable: 54px; --dt-layout-touch-target-minimum: 30px; --dt-motion-distance-enter: 10px; --dt-typography-font-size-body: 18px; --dt-typography-font-size-body-large: 20px; --dt-typography-font-size-body-small: 18px; --dt-typography-font-size-caption: 15px; --dt-typography-font-size-display: 24px; --dt-typography-font-size-display-large: 34px; --dt-typography-font-size-headline: 30px; --dt-typography-font-size-hero: 44px; --dt-typography-font-size-micro: 14px; --dt-typography-font-size-overline: 15px; --dt-typography-font-size-title: 20px; --dt-typography-font-size-title-large: 24px; } /* Mật độ Thoáng (mặc định Gọn ở :root). Đặt SAU khối Lớn để Chuẩn + Thoáng thắng theo thứ tự nguồn. */ :root[data-density="comfortable"] { --dt-component-header-control-size: 28px; --dt-component-header-height: 40px; --dt-component-header-icon-button-size: 28px; --dt-component-nav-list-gap: 2px; --dt-component-nav-list-height: 32px; --dt-component-nav-list-height-two-line: 52px; --dt-component-rhythm-group: 24px; --dt-component-rhythm-panel: 24px; --dt-component-rhythm-stack: 12px; --dt-dimension-size-lg: 44px; --dt-dimension-size-md: 36px; --dt-dimension-size-sm: 28px; } :root[data-ui-scale="large"][data-density="comfortable"] { --dt-component-header-control-size: 34px; --dt-component-header-height: 50px; --dt-component-header-icon-button-size: 34px; --dt-component-nav-list-gap: 2px; --dt-component-nav-list-height: 40px; --dt-component-nav-list-height-two-line: 64px; --dt-component-rhythm-group: 30px; --dt-component-rhythm-panel: 30px; --dt-component-rhythm-stack: 14px; --dt-dimension-size-lg: 54px; --dt-dimension-size-md: 44px; --dt-dimension-size-sm: 34px; }