/* ============================================================================ PACKAGING 100 · DESIGN TOKENS (V2-J, 2026-08-17) Direction: Scheme B (Capability Matrix) + P100 Brand Palette. Structure: Near-black (#0B0C0E) + Neutral Grey scale. Brand: P100 Brand Red (#E60015 fill, #C4000F text/links, #FEF4F5 tint). Two tiers, same structure as v2.css: Tier 1 literals — raw values, never referenced by components Tier 2 semantic — what components are allowed to use ZERO OFFSHORE DEPENDENCIES. No @import, no font CDN, no remote asset. The client is in Shanghai; fonts.googleapis.com does not resolve there. ========================================================================= */ :root { /* ── Tier 1 · literals ─────────────────────────────────────────────── */ /* Brand red — P100 brand palette. #E60015 for fills only (4.80:1 on white). #C4000F for text and links (6.26:1 on white). Near-black #0B0C0E for structure. No blue. */ --brand-600: #A3000C; /* active */ --brand-500: #E60015; /* logo red, fill only */ --brand-text:#C4000F; /* text and links dedicated */ --brand-200: #F5B8BE; --brand-100: #FDE7E9; --brand-50: #FEF4F5; /* Neutrals — neutral grey, replacing R2's cool blue-shifted greys */ --grey-950: #0B0C0E; /* near black structure */ --grey-900: #14161A; --grey-800: #23262B; --grey-700: #343941; --grey-600: #4A505A; --grey-500: #515151; /* logo subtitle grey */ --grey-400: #7C848E; --grey-300: #A8AEB6; --grey-200: #D6DADF; --grey-100: #E9ECEF; --grey-50: #F7F8F9; --white: #ffffff; /* Signal colours — used on data constructs (badges, table states) only */ --green-600: #14794a; --green-100: #dbf0e4; --amber-600: #8f5a05; /* 压在 --amber-100 上原为 4.42，差一点点过不了 AA；调深到 5.01 */ --amber-100: #fbeecd; --red-600: #8E1B14; /* distinct from brand red, must pair with icon */ --red-100: #fadcda; --violet-600:#5b3fa8; --violet-100:#e8e2f8; /* Type stacks — SYSTEM FONTS ONLY. CJK families are written out explicitly (PingFang SC on macOS/iOS, Microsoft YaHei on Windows, Noto Sans SC on Linux/Android). Do not rely on the browser's CJK fallback: on Windows an unqualified stack falls through to SimSun, which is the "老网页" look the client called out as 不够国际化. */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif; /* Numerals, codes, MOQ, capacities, table figures. Tabular by default. */ --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Courier New", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", monospace; /* Type scale — 1.20 minor third, fluid. Deliberately tight at the top: this is a working tool, not a landing page. No 4.6rem hero type. */ --text-3xs: 0.6875rem; /* 11px micro-label */ --text-2xs: 0.75rem; /* 12px badge, meta */ --text-xs: 0.8125rem; /* 13px table, aux */ --text-sm: 0.875rem; /* 14px UI default */ --text-md: 0.9375rem; /* 15px body */ --text-lg: clamp(1.0625rem, 1.01rem + 0.22vw, 1.1875rem); --text-xl: clamp(1.25rem, 1.16rem + 0.38vw, 1.5rem); /* section head */ --text-2xl: clamp(1.5rem, 1.34rem + 0.7vw, 1.9rem); --text-3xl: clamp(1.75rem, 1.5rem + 1.1vw, 2.35rem); /* hero — that's all */ --leading-tight: 1.22; --leading-snug: 1.4; --leading-body: 1.6; --tracking-caps: 0.07em; /* Space — 4px base */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem; --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; /* Radius — restrained. 4/6px is the whole vocabulary; 999px for pills. */ --radius-sm: 3px; --radius: 5px; --radius-lg: 8px; --radius-pill: 999px; /* Elevation — three steps, all shallow. Neutral shadow, no blue hue. */ --shadow-1: 0 1px 2px rgba(11, 12, 14, 0.06); --shadow-2: 0 1px 3px rgba(11, 12, 14, 0.08), 0 4px 10px rgba(11, 12, 14, 0.05); --shadow-3: 0 2px 6px rgba(11, 12, 14, 0.10), 0 12px 28px rgba(11, 12, 14, 0.10); /* Motion */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out: cubic-bezier(0.05, 0.7, 0.1, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --z-sticky: 50; --z-overlay: 100; /* ── Tier 2 · semantic ─────────────────────────────────────────────── */ --color-canvas: var(--grey-50); /* page background */ --color-surface: var(--white); /* cards, tables, panels */ --color-surface-sunken:var(--grey-100); /* wells, inactive tabs */ --color-surface-brand: var(--grey-950); /* search console, dark bands (#0B0C0E) */ --color-surface-tint: var(--brand-50); /* selected rows, soft blocks (#FEF4F5) */ --color-text: var(--grey-900); --color-text-secondary:var(--grey-600); --color-text-muted: var(--grey-500); --color-text-invert: var(--white); --color-text-invert-muted: var(--grey-300); --color-text-link: var(--brand-text); --color-primary: var(--brand-500); --color-primary-hover: var(--brand-600); --color-primary-active:var(--brand-600); --color-primary-soft: var(--brand-100); --color-on-primary: var(--white); --color-border: var(--grey-200); --color-border-strong: var(--grey-300); --color-border-brand: var(--brand-200); --color-divider: var(--grey-100); --color-focus: var(--brand-500); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-500) 35%, transparent); --color-success: var(--green-600); --color-success-soft: var(--green-100); --color-warning: var(--amber-600); --color-warning-soft: var(--amber-100); --color-danger: #8E1B14; --color-danger-soft: var(--red-100); --color-info: var(--grey-700); --color-info-soft: var(--grey-100); --color-vip: var(--violet-600); --color-vip-soft: var(--violet-100); --wrap-max: 78rem; --wrap-narrow: 46rem; --gutter: clamp(1rem, 3.5vw, 2.5rem); --control-height: 2.5rem; /* 40px — inputs, buttons */ --control-height-lg: 3.25rem; /* 52px — the main search field */ --control-height-sm: 1.875rem; /* 30px — filter chips, table controls */ color-scheme: light; accent-color: var(--color-primary); } /* ── Chinese typography ──────────────────────────────────────────────── English typographic habits applied verbatim to Chinese look wrong. Four real differences, handled here rather than left to chance: 1. No italics. There is no true italic Chinese face; browsers synthesise a slant that reads as a rendering bug. 2. Fewer usable weights. PingFang/YaHei ship far fewer optical weights, and CJK glyphs pack more strokes into the same em square, so they read lighter than Latin at the same numeric weight — headings step up. 3. Punctuation occupies a full em. Leading commas/brackets need optical trimming, and letter-spacing must not be applied to running CJK text. 4. Denser glyphs need more line height to stay legible. ------------------------------------------------------------------- */ :root:lang(zh) { --leading-body: 1.75; --leading-snug: 1.55; --leading-tight: 1.35; --tracking-caps: 0.02em; /* CJK caps-tracking looks broken at 0.07em */ } :root:lang(zh) :is(em, i, cite, address, .em) { font-style: normal; } :root:lang(zh) :is(h1, h2) { font-weight: 700; } :root:lang(zh) :is(h3, h4, h5, th, .stat-value) { font-weight: 600; } :root:lang(zh) :is(.btn, .badge, .chip, .eyebrow) { font-weight: 600; } /* Chinese runs longer per glyph but shorter per line-count; keep measure narrower so paragraphs do not become slabs. */ :root:lang(zh) p { max-inline-size: 42em; } :root:lang(zh) :is(h1, h2, h3) { letter-spacing: 0; } /* Optical trim for a line that starts with a CJK opening bracket/quote. */ :root:lang(zh) .cjk-trim { text-indent: -0.5em; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }