/* Zebra Motor Parts — theme tokens. The only place colours are defined. 2026-10-08 new theme: six theme colours chosen by the owner (reference cards "YI HENG"). Every other colour below is either derived from those six (lighter / darker steps and transparent tints for hover, selected, pressed and disabled states, chosen so text stays readable) or a status colour (success / warning / error-and-delete), kept clearly apart. Pages and components use these variables only; they never write a colour themselves. The official Zebra logo keeps its own colours on its white plate (--zb-logo-plate). */ :root { /* ---- the six theme colours ---- */ --zb-ink: #1F2226; /* 玄武黑 left navigation, page titles, main text */ --zb-blue: #4E6584; /* 夜雪蓝 primary buttons, links, selected states, main controls */ --zb-gold: #D2A663; /* 月辉金 key numbers, key notices, small accents (never large areas) */ --zb-snow: #E6E8E5; /* 雪浪白 page background, tables, main content areas */ --zb-frost: #E4DFD2; /* 霜月白 grouped areas, side cards, soft background layers */ --zb-mist: #919AA4; /* 风雪灰 borders, dividers, secondary icons, disabled states */ /* ---- steps derived from the six (contrast on 雪浪白 in brackets) ---- */ --zb-paper: #F4F5F3; /* 雪浪白 lightened: input fields, menus, secondary buttons */ --zb-ink-2: #4D5258; /* secondary text: 玄武黑 + 40% 风雪灰 (6.4:1) */ --zb-ink-3: #545A61; /* hints, placeholders, units (5.6:1) */ --zb-ink-hover: #2B2E31; /* navigation hover on 玄武黑 */ --zb-ink-line: #3A3E44; /* dividers inside the navigation */ --zb-blue-hover: #475B76; /* 夜雪蓝 15% darker: hover */ --zb-blue-press: #41526A; /* 夜雪蓝 25% darker: pressed */ --zb-blue-text: #475B76; /* blue text on light grounds, also on 霜月白 (5.6:1) */ --zb-blue-a06: rgb(78 101 132 / .06); --zb-blue-a10: rgb(78 101 132 / .10); --zb-blue-a16: rgb(78 101 132 / .16); --zb-blue-a24: rgb(78 101 132 / .24); --zb-blue-a35: rgb(78 101 132 / .35); --zb-gold-soft: #ECE1CF; /* 月辉金 tint: key notice background */ --zb-gold-mark: #E5D1B2; /* 月辉金 tint: search-hit highlight */ --zb-line-strong: #747C84; /* 风雪灰 darker: borders of inputs and buttons (3.4:1) */ --zb-line-mid: #B3B9BE; /* 风雪灰 60%: panel and table borders */ --zb-line-light: #CCD1D1; /* 风雪灰 30%: row dividers */ --zb-disabled-bg: #D1D4D5; /* 风雪灰 25%: disabled controls */ --zb-disabled-text: #7E868E; --zb-logo-plate: #FFFFFF; /* the official logo is a white-background image: keep its plate white */ --zb-photo-plate: #FFFFFF; /* product photos are shown on white */ /* ---- status colours (always shown with a word or icon, never colour alone) ---- */ --zb-success: #2B6446; --zb-success-soft: #D5E0D8; --zb-success-line: #9BB8A6; --zb-warning: #7E4610; --zb-warning-soft: #F1DFCB; --zb-warning-line: #D2A06C; --zb-danger: #9E3A31; /* errors and delete */ --zb-danger-hover: #8A3129; --zb-danger-soft: #EDD8D4; --zb-danger-line: #D29C94; /* ---- chart colours (2026-10-08, 决策分析 / 销售报表) ---- Eight categories in a fixed order, checked for colour-blind separation on 雪浪白 (worst neighbouring pair ΔE 9.1, normal vision 19.6); several are lighter than 3:1, so the chart always has its table and legend with names and figures. The ninth and later categories share one grey, separated by gaps. */ --zb-chart-1: #2A78D6; --zb-chart-2: #EB6834; --zb-chart-3: #1BAF7A; --zb-chart-4: #EDA100; --zb-chart-5: #E87BA4; --zb-chart-6: #008300; --zb-chart-7: #4A3AA7; --zb-chart-8: #E34948; --zb-chart-rest: #C3C8CE; /* ---- roles used by the pages (older names kept so every stylesheet shares them) ---- */ --zb-primary: var(--zb-blue); --zb-primary-hover: var(--zb-blue-hover); --zb-primary-press: var(--zb-blue-press); --zb-primary-text: var(--zb-blue-text); --zb-primary-soft: var(--zb-blue-a10); --zb-on-primary: var(--zb-paper); /* text on 夜雪蓝 (5.5:1) */ --zb-on-primary-a14: rgb(244 245 243 / .14); /* light overlays on 夜雪蓝 (shortcut keys) */ --zb-on-primary-a45: rgb(244 245 243 / .45); --zb-primary-text-hover: var(--zb-blue-press); --zb-navy: var(--zb-ink); --zb-navy-deep: var(--zb-ink); --zb-on-dark: var(--zb-snow); /* text on 玄武黑 (13:1) */ --zb-on-dark-2: var(--zb-mist); /* secondary text on 玄武黑 (5.6:1) */ --zb-accent: var(--zb-gold); --zb-accent-soft: var(--zb-gold-soft); --zb-accent-text: var(--zb-ink); /* text on gold grounds (7.1:1) */ --zb-text: var(--zb-ink); --zb-muted: var(--zb-ink-2); --zb-subtle: var(--zb-ink-3); --zb-icon: var(--zb-mist); --zb-line: var(--zb-line-mid); --zb-line-soft: var(--zb-line-light); --zb-canvas: var(--zb-snow); --zb-surface: var(--zb-snow); --zb-surface-2: var(--zb-frost); --zb-field: var(--zb-paper); --zb-raised: var(--zb-paper); --zb-hover: var(--zb-blue-a06); --zb-hover-solid: #DDE0DF; /* the same hover, as a solid colour (for cells that stay fixed while a table scrolls) */ --zb-selected-solid: #CED3D5; --zb-selected: var(--zb-blue-a16); --zb-pressed: var(--zb-blue-a24); --zb-focus: var(--zb-blue); --zb-focus-ring: 0 0 0 3px var(--zb-blue-a35); --zb-backdrop: rgb(31 34 38 / .55); --zb-shadow-floating: 0 10px 28px rgb(31 34 38 / .18); --zb-shadow-lg: 0 24px 64px rgb(31 34 38 / .28); --zb-shadow-sticky: -10px 0 10px -10px rgb(31 34 38 / .35); /* edge of a column that stays fixed while a table scrolls */ /* ---- type, spacing and shapes (unchanged) ---- */ --zb-font-body: "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei", sans-serif; --zb-font-display: "Bahnschrift", "Segoe UI Variable Display", "Segoe UI", "Microsoft YaHei", sans-serif; --zb-font-numeric: "Bahnschrift", "Segoe UI", "Microsoft YaHei", sans-serif; --zb-text-xs: 12px; --zb-text-sm: 13px; --zb-text-base: 14px; --zb-text-section: 18px; --zb-text-title: clamp(28px, 2.5vw, 36px); --zb-text-metric: clamp(28px, 2.8vw, 42px); --zb-space-1: 4px; --zb-space-2: 8px; --zb-space-3: 12px; --zb-space-4: 16px; --zb-space-5: 20px; --zb-space-6: 24px; --zb-space-8: 32px; --zb-space-10: 40px; --zb-radius-sm: 3px; --zb-radius-md: 5px; --zb-cut: 10px; --zb-control-height: 44px; --zb-label-height: 20px; --zb-icon-size: 20px; --zb-icon-stroke: 1.75; }