/* MOS Quiet Precision tokens / MOS 沉稳精确设计令牌 (M7-A). Source: outputs/design/MOS_PREMIUM_INDUSTRIAL_AI_DESIGN_SYSTEM.md. Original MOS values, local fonts only. Theme: [data-theme="light"|"dark"] on ; no attribute means "follow system". */ :root { color-scheme: light; /* color — light */ --mos-canvas: #F4F6F8; --mos-surface: #FFFFFF; --mos-surface-subtle: #F0F3F5; --mos-surface-raised: #FFFFFF; --mos-surface-hover: #E8EDEF; --mos-text: #202B33; --mos-text-secondary: #53616B; --mos-text-muted: #606F79; --mos-border: #DDE4E8; --mos-border-control: #7D8C96; --mos-accent: #294F4D; --mos-accent-hover: #203F3D; --mos-accent-pressed: #18312F; --mos-accent-soft: #E6F0EC; --mos-on-accent: #FFFFFF; --mos-focus: #294F4D; --mos-danger: #A4313B; --mos-danger-soft: #FBECEE; --mos-warning: #805019; --mos-warning-soft: #FAF0DD; --mos-success: #286344; --mos-success-soft: #E7F2EA; --mos-info: #345F88; --mos-info-soft: #EAF0F7; --mos-scrim: rgba(18, 26, 29, .40); --mos-shadow-1: 0 2px 8px rgba(18, 26, 29, .08); --mos-shadow-2: 0 12px 32px rgba(18, 26, 29, .14); /* typography — local Chinese system fonts, no CDN */ --mos-font-ui: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", system-ui, sans-serif; --mos-font-id: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace; --mos-type-title: 600 28px/38px var(--mos-font-ui); --mos-type-title-narrow: 600 26px/36px var(--mos-font-ui); --mos-type-conclusion: 600 20px/30px var(--mos-font-ui); --mos-type-section: 600 18px/28px var(--mos-font-ui); --mos-type-body: 400 14px/24px var(--mos-font-ui); --mos-type-table: 400 14px/22px var(--mos-font-ui); --mos-type-caption: 400 13px/20px var(--mos-font-ui); --mos-type-id: 400 13px/20px var(--mos-font-id); /* spacing 4..96 */ --mos-space-1: 4px; --mos-space-2: 8px; --mos-space-3: 12px; --mos-space-4: 16px; --mos-space-5: 20px; --mos-space-6: 24px; --mos-space-7: 32px; --mos-space-8: 40px; --mos-space-9: 48px; --mos-space-10: 64px; --mos-space-11: 80px; --mos-space-12: 96px; /* geometry */ --mos-radius-control: 8px; --mos-radius-panel: 14px; --mos-radius-overlay: 12px; --mos-radius-badge: 4px; --mos-sidebar: 220px; --mos-topbar: 56px; --mos-gutter: 20px; --mos-content-max: none; --mos-control: 36px; --mos-hit: 44px; /* motion — functional only */ --mos-ease: cubic-bezier(.2, 0, 0, 1); --mos-dur-hover: 120ms; --mos-dur-disclosure: 160ms; --mos-dur-drawer: 200ms; /* layers */ --mos-z-sticky: 10; --mos-z-actionbar: 20; --mos-z-menu: 30; --mos-z-drawer-scrim: 39; --mos-z-drawer: 40; --mos-z-modal-scrim: 59; --mos-z-modal: 60; --mos-z-toast: 70; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --mos-canvas: #151C21; --mos-surface: #1B252C; --mos-surface-subtle: #202C33; --mos-surface-raised: #26353E; --mos-surface-hover: #2C3C45; --mos-text: #E7EEF2; --mos-text-secondary: #B4C2CA; --mos-text-muted: #9AAAAF; --mos-border: #34434C; --mos-border-control: #70828C; --mos-accent: #B3D3C9; --mos-accent-hover: #C9E4DB; --mos-accent-pressed: #91BBB0; --mos-accent-soft: #28413E; --mos-on-accent: #142D28; --mos-focus: #C9E4DB; --mos-danger: #F1A4AC; --mos-danger-soft: #3A2329; --mos-warning: #E9C184; --mos-warning-soft: #382F20; --mos-success: #99CEAD; --mos-success-soft: #20352B; --mos-info: #A7C8E9; --mos-info-soft: #223141; --mos-scrim: rgba(0, 0, 0, .60); --mos-shadow-1: 0 2px 8px rgba(0, 0, 0, .24); --mos-shadow-2: 0 12px 32px rgba(0, 0, 0, .40); } } :root[data-theme="dark"] { color-scheme: dark; --mos-canvas: #151C21; --mos-surface: #1B252C; --mos-surface-subtle: #202C33; --mos-surface-raised: #26353E; --mos-surface-hover: #2C3C45; --mos-text: #E7EEF2; --mos-text-secondary: #B4C2CA; --mos-text-muted: #9AAAAF; --mos-border: #34434C; --mos-border-control: #70828C; --mos-accent: #B3D3C9; --mos-accent-hover: #C9E4DB; --mos-accent-pressed: #91BBB0; --mos-accent-soft: #28413E; --mos-on-accent: #142D28; --mos-focus: #C9E4DB; --mos-danger: #F1A4AC; --mos-danger-soft: #3A2329; --mos-warning: #E9C184; --mos-warning-soft: #382F20; --mos-success: #99CEAD; --mos-success-soft: #20352B; --mos-info: #A7C8E9; --mos-info-soft: #223141; --mos-scrim: rgba(0, 0, 0, .60); --mos-shadow-1: 0 2px 8px rgba(0, 0, 0, .24); --mos-shadow-2: 0 12px 32px rgba(0, 0, 0, .40); }