/* ============================================================
MICHI DESIGN SYSTEM · CSS Tokens
Version: 1.0
Primary: #00AAEE (from SVG logo source)
Updated: 2026-04-10
Usage:
============================================================ */
:root {
/* ------------------------------------------------------------
Primary · 米尺主色
------------------------------------------------------------ */
--michi: #00AAEE;
--michi-hover: #0095D4;
--michi-pressed: #007FB8;
--michi-light: #E0F5FD;
--michi-surface: #F5FBFE;
--michi-dim: rgba(0, 170, 238, 0.12);
--michi-dim-strong: rgba(0, 170, 238, 0.24);
/* Dark mode primary (brightened for AA contrast on dark bg) */
--michi-dark: #4DC4F0;
--michi-dark-hover: #6BCFF3;
/* ------------------------------------------------------------
Product Lines · 业务线子品牌色
------------------------------------------------------------ */
--energy: #00B473; /* 节能 */
--energy-light: #E6F8F0;
--energy-dark: #2EDB95; /* Dark mode variant */
--safety: #00AAEE; /* 安防 = 主色 */
--safety-light: #E0F5FD;
--safety-dark: #4DC4F0;
--food: #FF9500; /* 食品安全 */
--food-light: #FFF2E0;
--food-dark: #FFB340;
/* ------------------------------------------------------------
Semantic · 语义色
------------------------------------------------------------ */
--success: #00B473;
--success-light: #E6F8F0;
--success-text: #005F3C;
--warning: #FFB020;
--warning-light: #FFF6E0;
--warning-text: #7A5100;
--danger: #E5484D;
--danger-light: #FDECEE;
--danger-text: #8A1F22;
--info: #00AAEE;
--info-light: #E0F5FD;
--info-text: #005F80;
/* ------------------------------------------------------------
Neutrals · Ink Scale (10 levels)
------------------------------------------------------------ */
--ink-900: #0F1D26; /* Primary text · headings */
--ink-700: #32424F; /* Emphasized secondary text */
--ink-500: #4F5E6E; /* Body secondary · subtitles */
--ink-400: #6B7887; /* Muted text */
--ink-300: #8B95A3; /* Tertiary · placeholder */
--ink-200: #B8C0CC; /* Disabled · weak dividers */
--ink-100: #E4EAF0; /* Border · dividers */
--ink-50: #EEF2F7; /* Subtle border */
--ink-25: #F7F9FC; /* Surface · card background */
--ink-0: #FFFFFF; /* Canvas · primary background */
/* ------------------------------------------------------------
Dark Mode Surfaces
------------------------------------------------------------ */
--dark-bg: #0B0F14;
--dark-surface: #111A21;
--dark-surface-2: #1A222C;
--dark-surface-3: #232D38;
--dark-border: #1F2A34;
--dark-border-2: #2B3744;
--dark-text: #E6EDF3;
--dark-text-muted: #8B95A3;
--dark-text-dim: #636E7C;
/* ------------------------------------------------------------
Spacing Scale · 8px base grid
------------------------------------------------------------ */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-14: 56px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
--space-32: 128px;
/* ------------------------------------------------------------
Border Radius Scale
------------------------------------------------------------ */
--r-none: 0;
--r-xs: 4px;
--r-sm: 8px;
--r-md: 12px; /* Input / Select / Alert */
--r-lg: 16px;
--r-xl: 20px; /* Default card radius */
--r-2xl: 24px; /* Feature card */
--r-pill: 100px; /* All buttons / badges / tabs */
--r-full: 9999px;
/* ------------------------------------------------------------
Shadow System · Elevation
------------------------------------------------------------ */
--shadow-0: none;
--shadow-1: 0 1px 2px rgba(15, 29, 38, 0.06);
--shadow-2: 0 4px 12px rgba(15, 29, 38, 0.08);
--shadow-3: 0 12px 32px rgba(15, 29, 38, 0.10);
--shadow-4: 0 24px 56px rgba(15, 29, 38, 0.14);
/* Michi signature: blue glow for primary button + logo */
--shadow-blue: 0 8px 32px rgba(0, 170, 238, 0.25);
--shadow-blue-hover: 0 12px 40px rgba(0, 170, 238, 0.35);
/* Focus ring for keyboard navigation */
--shadow-ring: 0 0 0 3px rgba(0, 170, 238, 0.20);
/* ------------------------------------------------------------
Typography
------------------------------------------------------------ */
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI',
'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
--font-mono: 'SF Mono', Monaco, Menlo, Consolas, 'Courier New',
monospace;
/* Font sizes */
--text-display: 72px;
--text-h1: 56px;
--text-h2: 40px;
--text-h3: 28px;
--text-h4: 22px;
--text-lead: 20px;
--text-body: 16px;
--text-small: 14px;
--text-caption: 12px;
/* Font weights */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
/* Line heights */
--lh-tight: 1.05;
--lh-snug: 1.15;
--lh-normal: 1.25;
--lh-relaxed: 1.50;
--lh-loose: 1.60;
/* Letter spacing */
--ls-display: -2px;
--ls-h1: -1.4px;
--ls-h2: -0.8px;
--ls-h3: -0.5px;
--ls-h4: -0.3px;
--ls-body: 0;
--ls-caption: 0.6px;
/* ------------------------------------------------------------
Motion · Transition curves & durations
------------------------------------------------------------ */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--duration-fast: 0.15s;
--duration-normal: 0.2s;
--duration-slow: 0.3s;
--duration-slower: 0.5s;
/* ------------------------------------------------------------
Z-Index Scale
------------------------------------------------------------ */
--z-base: 0;
--z-dropdown: 10;
--z-sticky: 50;
--z-nav: 100;
--z-overlay: 500;
--z-modal: 1000;
--z-toast: 2000;
--z-tooltip: 3000;
/* ------------------------------------------------------------
Breakpoints (use as CSS media queries, not values directly)
Mobile: up to 767px
Tablet: 768px – 1023px
Desktop: 1024px – 1439px
Wide: 1440px+
------------------------------------------------------------ */
--bp-mobile: 320px;
--bp-tablet: 768px;
--bp-desktop: 1024px;
--bp-wide: 1440px;
--container-max: 1200px;
}
/* ============================================================
Dark Mode Overrides
Apply via: or prefers-color-scheme
============================================================ */
[data-theme="dark"] {
--ink-900: #E6EDF3;
--ink-700: #C8D2DC;
--ink-500: #8B95A3;
--ink-400: #6B7887;
--ink-300: #4F5E6E;
--ink-200: #32424F;
--ink-100: #1F2A34;
--ink-50: #1A222C;
--ink-25: #111A21;
--ink-0: #0B0F14;
--michi: var(--michi-dark);
--michi-hover: var(--michi-dark-hover);
--michi-light: rgba(77, 196, 240, 0.12);
--energy: var(--energy-dark);
--safety: var(--safety-dark);
--food: var(--food-dark);
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-2: 0 4px 12px rgba(0, 0, 0, 0.5);
--shadow-3: 0 12px 32px rgba(0, 0, 0, 0.6);
--shadow-4: 0 24px 56px rgba(0, 0, 0, 0.7);
--shadow-blue: 0 8px 32px rgba(77, 196, 240, 0.3);
--shadow-blue-hover: 0 12px 40px rgba(77, 196, 240, 0.45);
--shadow-ring: 0 0 0 3px rgba(77, 196, 240, 0.3);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--ink-900: #E6EDF3;
--ink-700: #C8D2DC;
--ink-500: #8B95A3;
--ink-400: #6B7887;
--ink-300: #4F5E6E;
--ink-200: #32424F;
--ink-100: #1F2A34;
--ink-50: #1A222C;
--ink-25: #111A21;
--ink-0: #0B0F14;
--michi: var(--michi-dark);
--michi-hover: var(--michi-dark-hover);
--michi-light: rgba(77, 196, 240, 0.12);
--energy: var(--energy-dark);
--safety: var(--safety-dark);
--food: var(--food-dark);
--shadow-blue: 0 8px 32px rgba(77, 196, 240, 0.3);
--shadow-ring: 0 0 0 3px rgba(77, 196, 240, 0.3);
}
}
/* ============================================================
Utility Classes · Optional but convenient
============================================================ */
.michi-btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
background: var(--michi);
color: #fff;
border: 0;
border-radius: var(--r-pill);
font-family: var(--font-sans);
font-size: 15px;
font-weight: var(--fw-medium);
letter-spacing: -0.15px;
cursor: pointer;
box-shadow: var(--shadow-blue);
transition: all var(--duration-normal) var(--ease-out);
}
.michi-btn-primary:hover {
background: var(--michi-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-blue-hover);
}
.michi-btn-primary:active {
background: var(--michi-pressed);
transform: translateY(0);
}
.michi-btn-primary:focus-visible {
outline: 0;
box-shadow: var(--shadow-blue), var(--shadow-ring);
}
.michi-btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.michi-card {
background: var(--ink-0);
border: 1px solid var(--ink-100);
border-radius: var(--r-xl);
padding: var(--space-6);
transition: all var(--duration-slow) var(--ease-out);
}
.michi-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-3);
border-color: transparent;
}
.michi-input {
width: 100%;
padding: var(--space-3) var(--space-4);
font-family: var(--font-sans);
font-size: 15px;
color: var(--ink-900);
background: var(--ink-0);
border: 1px solid var(--ink-100);
border-radius: var(--r-md);
transition: all var(--duration-normal) var(--ease-out);
outline: 0;
}
.michi-input:focus {
border-color: var(--michi);
box-shadow: var(--shadow-ring);
}
.michi-input::placeholder {
color: var(--ink-300);
}