/* ============================================================ Design tokens — Hongyuan Steel Structure international site Brand: deep navy industrial + steel gray + switchable accent ============================================================ */ :root { /* — Brand palette — */ --brand-900: #061B3A; --brand-800: #0B2C5A; /* primary deep blue */ --brand-700: #11407F; --brand-600: #1A56A3; --brand-500: #2E6FBF; --brand-100: #DCE7F4; --brand-50: #EEF3FA; /* — Steel neutral scale — */ --steel-950: #0B121E; --steel-900: #0F172A; --steel-800: #1E293B; --steel-700: #334155; --steel-600: #475569; --steel-500: #64748B; --steel-400: #94A3B8; --steel-300: #CBD5E1; --steel-200: #E2E8F0; --steel-100: #F1F5F9; --steel-50: #F8FAFC; /* — Accent (switchable via Tweaks) — */ --accent-orange-700: #B8430F; --accent-orange-600: #D9531A; --accent-orange-500: #E85D18; /* engineering orange */ --accent-orange-400: #F4753A; --accent-orange-100: #FCE2D3; --accent-blue-700: #0B5DAC; --accent-blue-600: #1370C8; --accent-blue-500: #1E88E5; /* tech blue */ --accent-blue-400: #4DA1ED; --accent-blue-100: #D4E7FA; /* Active accent — overridden by [data-accent] on */ --accent-700: var(--accent-orange-700); --accent-600: var(--accent-orange-600); --accent: var(--accent-orange-500); --accent-400: var(--accent-orange-400); --accent-100: var(--accent-orange-100); /* — Semantic surfaces — */ --bg: #FFFFFF; --surface: #FFFFFF; --surface-alt:var(--steel-50); --ink: var(--steel-900); --ink-muted: var(--steel-600); --border: var(--steel-200); --border-strong: var(--steel-300); --inverse-bg: var(--brand-800); --inverse-fg: #FFFFFF; --status-success: #15803D; --status-warning: #B45309; --status-danger: #B91C1C; /* — Typography — */ --font-display: 'Inter', 'Noto Sans SC', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-body: 'Inter', 'Noto Sans SC', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace; --fs-12: 0.75rem; --fs-14: 0.875rem; --fs-16: 1rem; --fs-18: 1.125rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-28: 1.75rem; --fs-32: 2rem; --fs-display-sm: clamp(2rem, 3.2vw, 2.75rem); --fs-display: clamp(2.5rem, 4.8vw, 4rem); --fs-display-lg: clamp(3rem, 6.4vw, 5.5rem); --lh-tight: 1.1; --lh-snug: 1.25; --lh-base: 1.55; --lh-loose: 1.75; /* — Spacing — */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* — Radius — */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 999px; /* — Shadows — */ --shadow-sm: 0 1px 2px rgba(11, 18, 30, 0.06); --shadow-md: 0 6px 18px -8px rgba(11, 18, 30, 0.18), 0 2px 6px rgba(11, 18, 30, 0.06); --shadow-lg: 0 24px 48px -16px rgba(11, 18, 30, 0.24), 0 8px 16px -8px rgba(11, 18, 30, 0.10); --shadow-inset: inset 0 0 0 1px var(--border); /* — Layout — */ --container: 1280px; --container-narrow: 980px; --nav-h: 72px; /* — Motion — */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --t-fast: 140ms; --t-base: 220ms; --t-slow: 420ms; } /* Accent overrides via Tweaks */ html[data-accent="blue"] { --accent-700: var(--accent-blue-700); --accent-600: var(--accent-blue-600); --accent: var(--accent-blue-500); --accent-400: var(--accent-blue-400); --accent-100: var(--accent-blue-100); } /* Dark mode (Tweaks) */ html[data-theme="dark"] { --bg: #07111F; --surface: #0E1B2D; --surface-alt:#0A1422; --ink: #F1F5F9; --ink-muted: #94A3B8; --border: #1E2D44; --border-strong: #2A3D58; --inverse-bg: #FFFFFF; --inverse-fg: var(--brand-800); --shadow-md: 0 6px 18px -8px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.3); --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.65), 0 8px 16px -8px rgba(0, 0, 0, 0.4); }