/* tokens.css — Galaxy Star design tokens. Single source of truth: docs/00-项目文档/design-spec.md sections 1 (color), 2 (fonts), 3 (spacing), 5 (motion). */ :root { /* ---- Background layers (design-spec 1.1) ---- */ --gs-color-bg: #05060f; --gs-color-bg-elevated: #0c0e1f; --gs-color-surface: #141830; --gs-color-surface-hover: #1b2040; --gs-color-scrim: rgb(5 6 15 / 72%); /* ---- Text ---- */ --gs-color-text-primary: #e8eaf6; --gs-color-text-secondary: #a9b1d6; --gs-color-text-tertiary: #7f88b0; /* ---- Accent colors (galaxy triad) ---- */ --gs-color-accent-blue: #6ab8ff; --gs-color-accent-purple: #a78bfa; --gs-color-accent-gold: #ffd166; /* ---- Functional ---- */ --gs-color-danger: #ff7a7a; --gs-color-success: #7ee2b8; --gs-color-focus: #6ab8ff; /* ---- Borders and glass ---- */ --gs-color-border: rgb(168 180 250 / 16%); --gs-color-border-strong: rgb(168 180 250 / 32%); --gs-glass-bg: rgb(12 14 31 / 68%); --gs-glass-blur: 12px; /* ---- 3D particle palette (read by galaxy.js at runtime, architecture.md 7.3) ---- */ --gs-galaxy-core: #ffe9c4; --gs-galaxy-arm: #9db4ff; --gs-galaxy-dust: #4a3f78; --gs-galaxy-bg-star: #c9d4ff; /* ---- Font stacks (design-spec 2.1) ---- */ --gs-font-sans: "Inter", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif; --gs-font-zh: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", var(--gs-font-sans); --gs-font-display: "Space Grotesk", var(--gs-font-sans); /* ---- Spacing scale, 4px base (design-spec 3.1) ---- */ --gs-space-1: 4px; --gs-space-2: 8px; --gs-space-3: 12px; --gs-space-4: 16px; --gs-space-5: 24px; --gs-space-6: 32px; --gs-space-7: 48px; --gs-space-8: 64px; --gs-space-9: 96px; /* ---- Motion (design-spec 5.1) ---- */ --gs-duration-fast: 150ms; --gs-duration-base: 250ms; --gs-duration-slow: 600ms; --gs-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --gs-ease-out: cubic-bezier(0, 0, 0.2, 1); /* ---- Layout (design-spec 3.2 / 4.4) ---- */ --gs-header-height: 56px; --gs-scroll-margin-top: 80px; --gs-container-max: 1200px; --gs-card-radius: 12px; /* ---- Fluid type scale (design-spec 2.2, en defaults) ---- */ --gs-font-size-display: clamp(2.75rem, 6vw, 4.5rem); --gs-font-size-h2: clamp(1.75rem, 3vw, 2.5rem); --gs-font-size-body-lg: 1.125rem; --gs-line-height-body: 1.6; --gs-font-body: var(--gs-font-sans); } /* Language-driven overrides (design-spec 2.1 / 2.2; is written by i18n.js in T4) */ html[lang="en"] { --gs-font-body: var(--gs-font-sans); --gs-line-height-body: 1.6; } html[lang="zh-CN"] { --gs-font-body: var(--gs-font-zh); --gs-line-height-body: 1.8; --gs-font-size-display: clamp(2.5rem, 5.5vw, 4rem); --gs-font-size-h2: clamp(1.6rem, 2.8vw, 2.25rem); --gs-font-size-body-lg: 1.0625rem; }