/* ============================================================================
天枢星通 设计系统 — Foundations (compute-power-network brand)
colors_and_type.css
Load Geist + Geist Mono + Noto Sans SC before this file:
Chinese-first: Noto Sans SC carries Chinese, Geist carries Latin/digits
(per-glyph fallback). All three are open-source.
============================================================================ */
:root {
/* ---- Brand / Primary ------------------------------------------------ */
--primary: #171717; /* ink-near-black — the single CTA color */
--on-primary: #ffffff;
/* ---- Ink / Text ladder --------------------------------------------- */
--ink: #171717; /* headings + body on light surfaces */
--body: #4d4d4d; /* secondary text */
--mute: #888888; /* lowest-priority text, placeholders */
/* ---- Hairlines ------------------------------------------------------ */
--hairline: #ebebeb; /* 1px dividers, card borders, inputs */
--hairline-strong: #a1a1a1; /* stronger divider / deemphasised text */
/* ---- Surfaces (4-step ladder) -------------------------------------- */
--canvas: #ffffff; /* pure-white card / dialog / modal */
--canvas-soft: #fafafa; /* default page body — 98% white */
--canvas-soft-2: #f5f5f5; /* deeper inset surface */
/* ---- Link / Success ------------------------------------------------- */
--link: #0070f3;
--link-deep: #0761d1;
--link-bg-soft: #d3e5ff;
--success: #0070f3;
/* ---- Semantic: Error ------------------------------------------------ */
--error: #ee0000;
--error-soft: #f7d4d6;
--error-deep: #c50000;
/* ---- Semantic: Warning ---------------------------------------------- */
--warning: #f5a623;
--warning-soft: #ffefcf;
--warning-deep: #ab570a;
/* ====================================================================
HIGHLIGHT ACCENTS (introduced from color_system_generator.html)
Base/structure stays ink + gray; these three carry the brand's
HIGHLIGHT layer only — decoration, emphasis, data pops, the mesh.
Purple #673B81 is text-safe on white (8.3:1). Green #88BD42 is a
FILL/dot color — use --accent-green-deep #619618 for text on white.
==================================================================== */
--accent-purple: #673B81; /* main highlight / emphasis */
--accent-purple-deep: #4c2266; /* hover / pressed / text */
--accent-purple-light: #cda3e2; /* borders, strokes */
--accent-purple-soft: #f3eef5; /* callout / tag fill */
--accent-green: #88BD42; /* key data / value highlight (fill, dots) */
--accent-green-deep: #619618; /* text on white, hover */
--accent-green-light: #c6e39a; /* borders, strokes */
--accent-green-soft: #f4f8ec; /* callout / tag fill */
--accent-warm: #bacf30; /* tertiary keyword / data pop (chartreuse) */
--accent-warm-deep: #91a800;
--accent-warm-light: #e3ec9e;
--accent-warm-soft: #f9f9e7;
/* ---- Extended accents (legacy in-product token set — kept for reference) */
--violet: #7928ca;
--violet-soft: #d8ccf1;
--violet-deep: #4c2889;
--cyan: #50e3c2;
--cyan-soft: #aaffec;
--cyan-deep: #29bc9b;
--highlight-pink: #ff0080;
--highlight-magenta: #eb367f;
/* ---- Brand mesh gradient stops (hero scale only) ------------------- */
/* Re-skinned to the introduced purple / green / warm highlight palette */
--gradient-develop-start: #673B81; /* purple */
--gradient-develop-end: #9262ac;
--gradient-preview-start: #88BD42; /* green */
--gradient-preview-end: #c6e39a;
--gradient-ship-start: #bacf30; /* warm chartreuse */
--gradient-ship-end: #e3ec9e;
/* The unified hero mesh — treat as one object, never miniaturise */
--mesh-gradient: conic-gradient(
from 180deg at 50% 50%,
#673B81 0deg, #9262ac 70deg, #88BD42 150deg,
#c6e39a 220deg, #bacf30 300deg, #673B81 360deg);
/* ---- Selection ------------------------------------------------------ */
--selection-bg: #171717;
--selection-fg: #f2f2f2;
/* ====================================================================
TYPOGRAPHY — Chinese-first (CJK primary, Latin via Geist)
Per-glyph fallback: Latin/digits render in Geist, Chinese in
Noto Sans SC. PingFang SC / Microsoft YaHei are the system options
when the web font hasn't loaded.
==================================================================== */
--font-sans: "Geist", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
/* Chinese has no real monospace tradition — code stays Latin in Geist Mono,
but Chinese glyphs inside mono labels fall back to Noto Sans SC. */
--font-mono: "Geist Mono", "Noto Sans SC", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
/* ---- Type scale (size / weight / line-height / tracking) -----------
CJK tuning vs. the Latin-only spec:
· Tracking softened — aggressive negatives (-2.4px) collide Chinese
characters. Display keeps a gentle tightening (~-0.02em); body is 0.
· Line-height raised — CJK needs more leading (body ≈ 1.6, display ≈ 1.25). */
--display-xl-size: 48px; --display-xl-weight: 600; --display-xl-lh: 60px; --display-xl-ls: -1px;
--display-lg-size: 32px; --display-lg-weight: 600; --display-lg-lh: 44px; --display-lg-ls: -0.6px;
--display-md-size: 24px; --display-md-weight: 600; --display-md-lh: 34px; --display-md-ls: -0.3px;
--display-sm-size: 20px; --display-sm-weight: 600; --display-sm-lh: 30px; --display-sm-ls: -0.2px;
--body-lg-size: 18px; --body-lg-weight: 400; --body-lg-lh: 30px; --body-lg-ls: 0px;
--body-md-size: 16px; --body-md-weight: 400; --body-md-lh: 26px; --body-md-ls: 0px;
--body-md-strong-weight: 500;
--body-sm-size: 14px; --body-sm-weight: 400; --body-sm-lh: 22px; --body-sm-ls: 0px;
--caption-size: 12px; --caption-weight: 400; --caption-lh: 18px; --caption-ls: 0px;
--code-size: 13px; --code-weight: 400; --code-lh: 20px; --code-ls: 0px;
/* ====================================================================
SPACING — base unit 4px
==================================================================== */
--space-xxs: 4px;
--space-xs: 8px;
--space-sm: 12px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 40px;
--space-3xl: 48px;
--space-4xl: 64px;
--space-5xl: 96px;
--space-6xl: 128px;
--space-section: 192px;
/* ====================================================================
RADII
==================================================================== */
--radius-none: 0px;
--radius-xs: 4px;
--radius-sm: 6px; /* base UI radius (--geist-radius) */
--radius-md: 8px; /* marketing radius (--geist-marketing-radius) */
--radius-lg: 12px;
--radius-xl: 16px;
--radius-pill-sm: 64px;
--radius-pill: 100px; /* marketing CTA pill */
--radius-full: 9999px;
/* ====================================================================
ELEVATION — stacked shadows + inset hairline ring
==================================================================== */
--shadow-1: inset 0 0 0 1px #00000014;
--shadow-2: 0px 1px 1px #00000005, 0px 2px 2px #0000000a, inset 0 0 0 1px #00000014;
--shadow-3: 0px 2px 2px #0000000a, 0px 8px 8px -8px #0000000a, inset 0 0 0 1px #00000014;
--shadow-4: 0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a, inset 0 0 0 1px #00000014;
--shadow-5: 0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f, inset 0 0 0 1px #00000014;
}
::selection { background: var(--selection-bg); color: var(--selection-fg); }
/* ============================================================================
SEMANTIC TYPE CLASSES
============================================================================ */
.display-xl { font-family: var(--font-sans); font-size: var(--display-xl-size); font-weight: var(--display-xl-weight); line-height: var(--display-xl-lh); letter-spacing: var(--display-xl-ls); color: var(--ink); }
.display-lg { font-family: var(--font-sans); font-size: var(--display-lg-size); font-weight: var(--display-lg-weight); line-height: var(--display-lg-lh); letter-spacing: var(--display-lg-ls); color: var(--ink); }
.display-md { font-family: var(--font-sans); font-size: var(--display-md-size); font-weight: var(--display-md-weight); line-height: var(--display-md-lh); letter-spacing: var(--display-md-ls); color: var(--ink); }
.display-sm { font-family: var(--font-sans); font-size: var(--display-sm-size); font-weight: var(--display-sm-weight); line-height: var(--display-sm-lh); letter-spacing: var(--display-sm-ls); color: var(--ink); }
.body-lg { font-family: var(--font-sans); font-size: var(--body-lg-size); font-weight: 400; line-height: var(--body-lg-lh); color: var(--body); }
.body-md { font-family: var(--font-sans); font-size: var(--body-md-size); font-weight: 400; line-height: var(--body-md-lh); color: var(--body); }
.body-md-strong { font-family: var(--font-sans); font-size: var(--body-md-size); font-weight: 500; line-height: var(--body-md-lh); color: var(--ink); }
.body-sm { font-family: var(--font-sans); font-size: var(--body-sm-size); font-weight: 400; line-height: var(--body-sm-lh); letter-spacing: var(--body-sm-ls); color: var(--body); }
.body-sm-strong { font-family: var(--font-sans); font-size: var(--body-sm-size); font-weight: 500; line-height: var(--body-sm-lh); letter-spacing: var(--body-sm-ls); color: var(--ink); }
.caption { font-family: var(--font-sans); font-size: var(--caption-size); font-weight: 400; line-height: var(--caption-lh); color: var(--body); }
.caption-mono { font-family: var(--font-mono); font-size: var(--caption-size); font-weight: 400; line-height: var(--caption-lh); color: var(--body); }
.code { font-family: var(--font-mono); font-size: var(--code-size); font-weight: 400; line-height: var(--code-lh); }
/* Eyebrow — the small technical label above headlines.
Chinese has no case (uppercase only affects Latin); a touch of POSITIVE
tracking gives small CJK labels editorial breathing room. */
.eyebrow { font-family: var(--font-mono); font-size: var(--caption-size); font-weight: 400; line-height: var(--caption-lh); letter-spacing: 0.08em; color: var(--mute); text-transform: uppercase; }