/* M3.2.1 · Design Tokens v21 --------------------------------------------- * Canonical stable tokens shared by motion, product design and components. * * Responsive overrides remain close to the components that own them. * Historical compatibility variables (--polish/--glass/--type) intentionally * remain in visual_polish.css until their legacy rules are retired. */ :root { /* Motion */ --motion-ease-out: cubic-bezier(.22, .78, .28, 1); --motion-ease-soft: cubic-bezier(.2, .65, .3, 1); --motion-fast: 140ms; --motion-normal: 220ms; --motion-slow: 420ms; /* Product design */ --ds-radius-page: 20px; --ds-radius-panel: 18px; --ds-radius-card: 14px; --ds-radius-control: 11px; --ds-radius-pill: 999px; --ds-surface-panel: rgba(255, 255, 255, .60); --ds-surface-panel-strong: rgba(255, 255, 255, .72); --ds-surface-card: rgba(255, 255, 255, .40); --ds-surface-card-hover: rgba(255, 255, 255, .48); --ds-surface-control: rgba(255, 255, 255, .66); --ds-surface-control-hover: rgba(255, 255, 255, .78); --ds-surface-muted: rgba(247, 250, 247, .50); --ds-border: rgba(255, 255, 255, .68); --ds-border-soft: rgba(255, 255, 255, .46); --ds-line: rgba(75, 99, 84, .10); --ds-text-strong: #23372b; --ds-text: #415148; --ds-text-secondary: #6d7b72; --ds-text-muted: #839087; --ds-green: #2f8650; --ds-green-soft: rgba(47, 134, 80, .10); --ds-amber: #b37b21; --ds-amber-soft: rgba(179, 123, 33, .10); --ds-red: #b94d49; --ds-red-soft: rgba(185, 77, 73, .09); --ds-blue: #4e7597; --ds-blue-soft: rgba(78, 117, 151, .10); --ds-panel-shadow: 0 4px 12px rgba(36, 50, 43, .026), 0 1px 3px rgba(36, 50, 43, .013), inset 0 1px 0 rgba(255, 255, 255, .58); --ds-card-shadow: 0 3px 8px rgba(37, 51, 44, .022), 0 1px 2px rgba(37, 51, 44, .011), inset 0 1px 0 rgba(255, 255, 255, .58); --ds-control-shadow: inset 0 1px 0 rgba(255, 255, 255, .62), 0 1px 2px rgba(35, 49, 42, .010); --ds-panel-blur: 14px; --ds-card-blur: 10px; --ds-space-1: 6px; --ds-space-2: 10px; --ds-space-3: 14px; --ds-space-4: 18px; --ds-space-5: 24px; } /* M3.2.1 · Canonical surface/type compatibility tokens v25 --------------- * Former early visual-polish variables. Retained as aliases while page-level * CSS is progressively normalized onto --ds-* tokens. */ :root { --polish-canvas: #f4f7f4; --polish-surface: rgba(255, 255, 255, .94); --polish-surface-soft: #f8fbf8; --polish-surface-strong: #f1f7f2; --polish-ink: #1d2d23; --polish-subtle: #708077; --polish-line: #e0e8e1; --polish-line-strong: #cfdcd1; --polish-green: #247a45; --polish-green-strong: #176238; --polish-green-soft: #eaf5ec; --polish-shadow: 0 10px 30px rgba(29, 61, 39, .045); --polish-shadow-raised: 0 16px 38px rgba(29, 61, 39, .075); --polish-radius-lg: 18px; --polish-radius-md: 12px; } /* M3.2.1 · Semantic visual tokens v29 ------------------------------------ * Canonical shared values for glass surfaces, rims, shadows, text and blur. * These tokens are intentionally semantic enough to tune the whole product * without hunting through page/component selectors. */ :root { /* Glass opacity ladder */ --glass-white-88: rgba(255,255,255,.88); --glass-white-84: rgba(255,255,255,.84); --glass-white-82: rgba(255,255,255,.82); --glass-white-80: rgba(255,255,255,.80); --glass-white-78: rgba(255,255,255,.78); --glass-white-77: rgba(255,255,255,.77); --glass-white-74: rgba(255,255,255,.74); --glass-white-72: rgba(255,255,255,.72); --glass-white-68: rgba(255,255,255,.68); --glass-white-66: rgba(255,255,255,.66); --glass-white-62: rgba(255,255,255,.62); --glass-white-58: rgba(255,255,255,.58); --glass-white-56: rgba(255,255,255,.56); --glass-white-50: rgba(255,255,255,.50); --glass-white-48: rgba(255,255,255,.48); --glass-white-46: rgba(255,255,255,.46); --glass-white-42: rgba(255,255,255,.42); --glass-white-35: rgba(255,255,255,.35); --glass-white-27: rgba(255,255,255,.27); --glass-white-24: rgba(255,255,255,.24); --glass-white-23: rgba(255,255,255,.23); --glass-white-22: rgba(255,255,255,.22); --glass-white-17: rgba(255,255,255,.17); --glass-white-14: rgba(255,255,255,.14); --glass-white-11: rgba(255,255,255,.11); --glass-white-09: rgba(255,255,255,.09); /* Lines / shadow ink */ --line-soft: rgba(75,99,84,.10); --shadow-ink-012: rgba(37,51,44,.012); --shadow-ink-014: rgba(37,51,44,.014); --shadow-ink-024: rgba(37,51,44,.024); /* Operational text */ --text-success-strong: #317947; --text-control: #536158; --text-accent-control: #3f7652; --text-secondary-strong: #65746b; /* Glass geometry */ --radius-glass-lg: 18px; --radius-glass-md: 16px; --radius-compact: 10px; /* Glass blur ladder */ --blur-glass-xs: 3px; --blur-glass-sm: 5px; --blur-glass-md: 8px; --blur-glass-card: 11px; --blur-glass-panel: 20px; /* Trend component material */ --trend-group-bg-top: var(--glass-white-82); --trend-group-bg-bottom: var(--glass-white-74); --trend-card-bg-top: var(--glass-white-23); --trend-card-bg-mid: var(--glass-white-14); --trend-card-bg-bottom: var(--glass-white-09); --trend-card-hover-top: var(--glass-white-27); --trend-card-hover-mid: var(--glass-white-17); --trend-card-hover-bottom: var(--glass-white-11); --trend-card-border: var(--glass-white-72); --trend-card-border-hover: var(--glass-white-80); --trend-stat-surface: var(--glass-white-22); --trend-stat-border: var(--glass-white-46); } /* M3.2.1 · Product semantic layer v30 ------------------------------------ * Stable semantic aliases. Product-wide visual tuning should prefer these * names instead of opacity-specific/raw values. */ :root { /* Text hierarchy */ --text-primary: var(--ds-text-strong); --text-body: var(--ds-text); --text-secondary: var(--ds-text-secondary); --text-muted: var(--ds-text-muted); --text-success: var(--ds-green); --text-warning: var(--ds-amber); --text-danger: var(--ds-red); --text-info: var(--ds-blue); /* Surface hierarchy */ --surface-panel: var(--ds-surface-panel); --surface-panel-strong: var(--ds-surface-panel-strong); --surface-card: var(--ds-surface-card); --surface-card-hover: var(--ds-surface-card-hover); --surface-control: var(--ds-surface-control); --surface-control-hover: var(--ds-surface-control-hover); --surface-muted: var(--ds-surface-muted); --surface-segmented: rgba(255,255,255,.38); --surface-selected: rgba(237,248,239,.76); --surface-table-head: rgba(245,248,245,.58); --surface-table-row: rgba(255,255,255,.10); --surface-empty: var(--glass-white-22); /* Borders / separators */ --border-default: var(--ds-border); --border-soft: var(--ds-border-soft); --border-line: var(--ds-line); --border-selected: rgba(70,153,92,.38); --border-control: rgba(195,208,199,.72); --border-control-hover: rgba(165,188,171,.76); --border-button: rgba(190,205,194,.70); --border-table: rgba(78,101,86,.10); --border-table-soft: rgba(78,101,86,.075); --border-empty: rgba(137,158,144,.24); /* Control / table semantic text */ --text-table-head: #65736b; --text-danger-message: #a94e4a; /* Common glass highlights */ --glass-highlight-90: rgba(255,255,255,.90); --glass-highlight-82: var(--glass-white-82); --glass-highlight-80: var(--glass-white-80); --glass-highlight-72: var(--glass-white-72); --glass-highlight-66: var(--glass-white-66); --glass-highlight-62: var(--glass-white-62); --glass-highlight-58: var(--glass-white-58); --glass-highlight-54: rgba(255,255,255,.54); --glass-highlight-52: rgba(255,255,255,.52); --glass-highlight-50: var(--glass-white-50); --glass-highlight-21: rgba(255,255,255,.21); --glass-highlight-20: rgba(255,255,255,.20); /* Dialog */ --dialog-backdrop: rgba(25,35,30,.24); --dialog-surface-end: rgba(248,251,249,.78); --dialog-shadow: 0 18px 48px rgba(25,37,30,.14), 0 4px 12px rgba(25,37,30,.06), inset 0 1px 0 var(--glass-highlight-90); /* Device detail */ --detail-surface-end: rgba(248,251,249,.34); --detail-subcard-surface: rgba(248,251,249,.42); --detail-hover-top: rgba(255,255,255,.61); --detail-hover-mid: rgba(255,255,255,.45); --detail-hover-end: rgba(248,251,249,.37); --detail-text-label: var(--text-secondary); --detail-text-value: var(--text-primary); --detail-divider: rgba(84,105,92,.10); --detail-lower-edge: rgba(78,100,87,.10); /* Trend */ --trend-group-surface-end: rgba(249,252,249,.74); --trend-group-surface-end-mobile: rgba(249,252,249,.77); --trend-group-text: var(--text-body); --trend-group-kicker: var(--text-accent-control); --trend-group-count: var(--text-secondary); --trend-empty-text: var(--text-secondary); --trend-divider: rgba(80,104,88,.10); /* Reusable shadows */ --shadow-selection: 0 2px 6px rgba(51,113,69,.035); --shadow-contact-panel: 0 4px 11px rgba(37,51,44,.027), 0 1px 3px var(--shadow-ink-014), inset 0 1px 0 var(--glass-highlight-62); --shadow-contact-card: 0 3px 8px rgba(37,51,44,.025), 0 1px 2px var(--shadow-ink-012), inset 0 1px 0 var(--glass-highlight-66); --shadow-detail: 0 4px 10px rgba(36,51,43,.028), 0 1px 3px rgba(36,51,43,.014), inset 0 1px 0 var(--glass-highlight-82), inset 1px 0 0 var(--glass-highlight-20); --shadow-trend: 0 4px 11px rgba(37,51,45,.027), 0 1px 3px rgba(37,51,45,.013), inset 0 1px 0 var(--glass-highlight-80), inset 1px 0 0 var(--glass-highlight-21); --shadow-glass-hover: 0 6px 13px rgba(37,51,44,.032), 0 1px 3px var(--shadow-ink-014), inset 0 1px 0 var(--glass-highlight-72); } /* M3.2.1 · State + control semantic tokens v31 --------------------------- * One vocabulary for device state, alert severity, messages and controls. */ :root { /* State palette */ --state-success-fg: #2f7d4a; --state-success-bg: #edf8ef; --state-success-dot: #50ad68; --state-success-border: #b7dfc3; --state-warning-fg: #966821; --state-warning-bg: #fff7e8; --state-warning-dot: #d79b37; --state-warning-border: #ead19b; --state-danger-fg: #a84444; --state-danger-bg: #fff1f1; --state-danger-dot: #ce6868; --state-danger-border: #efc5bd; --state-info-fg: #54728c; --state-info-bg: #eef3f8; --state-info-dot: #6691b0; --state-info-border: #c9d9e6; --state-neutral-fg: #79827b; --state-neutral-bg: #f1f3f1; --state-neutral-dot: #9aa39c; --state-neutral-border: #d9dfda; /* Control palette */ --control-primary-fg: #ffffff; --control-primary-bg: #2f8650; --control-primary-bg-hover: #247a45; --control-primary-border: #2f7c48; --control-primary-border-hover: #176238; --control-secondary-fg: var(--text-body); --control-secondary-bg: var(--surface-control); --control-secondary-bg-hover: var(--surface-control-hover); --control-secondary-border: var(--border-button); --control-danger-fg: #ffffff; --control-danger-bg: #a74332; --control-danger-bg-hover: #963b2d; --control-danger-border: #a74332; --control-disabled-fg: var(--text-muted); --control-disabled-bg: var(--surface-muted); --control-disabled-opacity: .52; --control-focus-ring: rgba(65,151,89,.12); --control-focus-border: rgba(65,151,89,.52); /* Selected / active */ --active-fg: var(--state-success-fg); --active-bg: var(--state-success-bg); --active-border: rgba(70,153,92,.38); /* Neutral utility material */ --utility-card-border: #e1e9e2; --utility-card-bg: #f8fbf8; --utility-heading: #3b5142; --utility-focus-shadow: 0 12px 26px rgba(35,87,50,.04); --utility-icon-shadow: 0 5px 14px rgba(34,119,65,.08); } /* M3.2.1 · Density + spacing system v32 ---------------------------------- * Shared rhythm for page sections, panels, cards and controls. */ :root { --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 20px; --space-xl: 24px; --space-2xl: 32px; --layout-page-gap: 18px; --layout-section-gap: 16px; --layout-card-gap: 14px; --layout-control-gap: 10px; --panel-padding: 20px; --panel-padding-compact: 16px; --card-padding: 16px; --card-padding-compact: 12px; --control-height: 40px; --control-height-compact: 34px; --control-gap: 8px; --metric-sidebar-width: 300px; --trend-device-width: 280px; --trend-range-width: 620px; } /* M3.2.1 · Layout skeleton tokens v34 ------------------------------------ * One page rhythm for all primary product screens. */ :root { --page-max-width: 1540px; --page-gutter: 28px; --page-gutter-wide: 36px; --page-gutter-mobile: 14px; --page-header-min-height: 76px; --page-header-gap: 18px; --page-section-gap: 18px; --panel-block-gap: 16px; --panel-padding-wide: 22px; --panel-padding-normal: 20px; --panel-padding-mobile: 15px; --grid-gap-wide: 16px; --grid-gap-normal: 14px; --grid-gap-compact: 10px; --toolbar-min-height: 54px; --section-header-min-height: 42px; } /* M3.2.1 · Typography hierarchy v35 -------------------------------------- */ :root { --type-display: clamp(30px, 2.15vw, 38px); --type-page-title: clamp(27px, 1.85vw, 34px); --type-section-title: clamp(21px, 1.35vw, 26px); --type-card-title: 19px; --type-body: 15px; --type-body-strong: 15px; --type-label: 13px; --type-caption: 12px; --type-micro: 11px; --leading-tight: 1.18; --leading-title: 1.28; --leading-body: 1.62; --leading-caption: 1.48; --weight-title: 750; --weight-card-title: 700; --weight-strong: 650; --weight-body: 500; --weight-muted: 500; --tracking-title: -0.025em; --tracking-card: -0.012em; --tracking-body: 0; --tracking-label: 0.015em; --text-primary: rgba(27, 48, 40, 0.96); --text-secondary: rgba(58, 78, 69, 0.82); --text-muted: rgba(78, 96, 88, 0.70); --text-faint: rgba(91, 108, 100, 0.58); } /* M3.2.1 · Control language v36 ------------------------------------------ */ :root { --control-radius: 11px; --control-radius-pill: 999px; --control-height-sm: 34px; --control-height-md: 40px; --control-height-lg: 44px; --control-pad-x-sm: 11px; --control-pad-x-md: 14px; --control-pad-x-lg: 17px; --control-border: rgba(157, 178, 165, .42); --control-border-hover: rgba(113, 157, 128, .52); --control-border-active: rgba(67, 145, 91, .62); --control-surface: rgba(255,255,255,.58); --control-surface-hover: rgba(255,255,255,.72); --control-surface-active: rgba(237,248,239,.76); --control-shadow: inset 0 1px 0 rgba(255,255,255,.62), 0 1px 2px rgba(35,49,42,.018); --control-shadow-hover: inset 0 1px 0 rgba(255,255,255,.76), 0 3px 9px rgba(35,70,47,.032); --control-shadow-active: inset 0 1px 0 rgba(255,255,255,.72), 0 2px 7px rgba(44,109,63,.04); --focus-ring: 0 0 0 3px rgba(65,151,89,.11), 0 2px 7px rgba(44,109,63,.035); --control-transition: background-color 170ms ease, border-color 170ms ease, box-shadow 190ms ease, color 170ms ease, transform 180ms cubic-bezier(.22,.78,.24,1); } /* M3.2.1 · Data surface system v37 --------------------------------------- */ :root { /* Data surfaces */ --data-surface: rgba(255,255,255,.44); --data-surface-strong: rgba(255,255,255,.62); --data-header-surface: rgba(246,249,246,.78); --data-row-hover: rgba(255,255,255,.32); --data-row-selected: rgba(237,248,239,.50); --data-border: rgba(91,116,100,.11); --data-border-strong: rgba(91,116,100,.16); /* Data density */ --data-row-height: 46px; --data-row-height-compact: 40px; --data-cell-x: 14px; --data-cell-x-compact: 11px; --data-cell-y: 10px; /* Empty / loading */ --empty-min-height: 132px; --empty-icon-size: 34px; --empty-surface: rgba(255,255,255,.20); --empty-border: rgba(125,149,134,.20); --skeleton-base: rgba(115,139,124,.08); --skeleton-highlight: rgba(255,255,255,.48); /* Message surfaces */ --message-info-bg: rgba(238,244,249,.72); --message-info-border: rgba(101,140,169,.22); --message-success-bg: rgba(237,248,239,.72); --message-success-border: rgba(72,151,94,.22); --message-warning-bg: rgba(255,247,232,.76); --message-warning-border: rgba(196,142,51,.24); --message-danger-bg: rgba(255,241,241,.76); --message-danger-border: rgba(185,77,73,.24); /* Dialog */ --dialog-width-sm: 420px; --dialog-width-md: 560px; --dialog-width-lg: 760px; --dialog-padding: 20px; /* Pagination */ --pager-gap: 6px; --pager-height: 34px; } /* M3.2.1 · Microinteraction motion language v38 -------------------------- */ :root { --motion-instant: 110ms; --motion-fast: 160ms; --motion-normal: 220ms; --motion-slow: 320ms; --motion-page: 380ms; --ease-standard: cubic-bezier(.2,.72,.24,1); --ease-enter: cubic-bezier(.16,.82,.24,1); --ease-exit: cubic-bezier(.4,0,.7,.2); --ease-spring-soft: cubic-bezier(.2,.9,.25,1.08); --lift-control: -1px; --lift-card: -2px; --press-scale: .985; --motion-shadow-card: 0 8px 22px rgba(35,58,45,.045), inset 0 1px 0 rgba(255,255,255,.62); --motion-shadow-card-hover: 0 12px 28px rgba(35,58,45,.065), inset 0 1px 0 rgba(255,255,255,.72); } /* M3.2.1 · Navigation + visualization hierarchy v39 ---------------------- */ :root { --nav-current-bg: rgba(255,255,255,.58); --nav-current-border: rgba(91,132,104,.24); --nav-current-marker: rgba(69,137,88,.72); --nav-hover-bg: rgba(255,255,255,.34); --page-state-line: rgba(83,133,99,.22); --page-state-accent: rgba(70,137,89,.62); --chart-frame-bg: rgba(255,255,255,.24); --chart-frame-border: rgba(92,120,103,.10); --chart-grid-hint: rgba(88,112,98,.08); --chart-legend-bg: rgba(255,255,255,.36); --chart-legend-border: rgba(91,116,100,.12); --severity-critical-accent: rgba(177,67,59,.72); --severity-warning-accent: rgba(188,132,41,.68); --severity-info-accent: rgba(75,120,157,.58); --severity-success-accent: rgba(67,137,86,.58); }