/* ========================================================================= SIGNAL — Design System Tokens Direction D, selected 2026-07-28. Expanded with structural patterns borrowed from stripe.com; the visual language stays D's own. What was taken from Stripe: section rhythm, two-tone headline, logo strip under the hero, vertical container rules, dark stats band, feature+code two-column, mega footer. What was deliberately NOT taken: Stripe's light display weight (300) and its layered coloured shadows. Both are the opposite of this system's Archivo Black display and hard offset blocks — adopting them would turn Signal into Stripe-with-violet. ========================================================================= */ :root { /* ==================================================================== COLOR */ /* Brand — one loud violet, one acid pop used sparingly, black as structure. */ --violet-700: #2E17B8; --violet: #4B2AEF; /* the brand colour */ --violet-400: #7C63F5; --violet-100: #ECE7FE; --violet-050: #F6F3FE; --pop: #E6FF4F; /* acid highlight — sparing, high-value only */ --pop-deep: #C9E32B; --ink: #12101C; /* near-black. Structure, outlines, display type */ --ink-700: #322C48; --ink-500: #5C566F; /* body-copy muted */ --ink-300: #9A93AE; --ink-100: #E2DEF0; --ink-050: #F4F2FB; --white: #FFFFFF; /* Semantic */ --ok: #157A47; --ok-bg: #DFF3E7; --ok-line: #A9DCC0; --warn: #8A5A00; --warn-bg: #FCF0D8; --warn-line: #EAC98A; --fail: #B3202E; --fail-bg: #FCE4E7; --fail-line: #F0B2BA; --info: var(--violet); --info-bg: var(--violet-100); /* Roles */ --bg: var(--white); --bg-alt: var(--ink-050); --surface: var(--white); --surface-2: var(--violet-050); --line: var(--ink-100); --line-strong: var(--ink); /* the hard outline — Signal's signature */ --text: var(--ink); --text-muted: var(--ink-500); --text-faint: var(--ink-300); --accent: var(--violet); --on-accent: var(--white); /* Inverted surfaces */ --dark-bg: var(--ink); --dark-surface: #1B1830; --dark-line: rgba(255,255,255,.13); --dark-text: var(--white); --dark-muted: #A79FC4; /* On the violet hero */ --hero-bg: var(--violet); --hero-text: var(--white); /* Two-tone headline: the continuation clause. Tuned for 900 weight at 60–90px — the body-copy muted value (#D3C9FB) turns to mush at that size, so the headline gets its own, more saturated value. */ --hero-head-2: #B9A6FF; --hero-body: #DCD4FB; /* hero sub-copy, 4.7:1 on violet */ --hero-line: rgba(255,255,255,.26); /* =============================================================== TYPOGRAPHY */ /* Archivo Black is a SINGLE-WEIGHT family — its 400 IS the black weight. Never set font-weight on it. Anything needing a lighter display cut uses Archivo (the variable sibling). */ --font-display: "Archivo Black", "Archivo", Inter, sans-serif; --font-body: "Archivo", Inter, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; /* 中文栈:思源黑体 Heavy 对位 Archivo Black 的重量感,Regular 对位正文。 没有 Archivo 的中文字形,所以中文态下由 CJK 字体接管,拉丁部分仍走 Archivo。 */ --font-zh-display: "Archivo Black", "Source Han Sans SC Heavy", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --font-zh-body: "Archivo", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --font-num: var(--font-body); --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 14px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 21px; --fs-xl: clamp(24px, 2.2vw, 30px); --fs-2xl: clamp(30px, 3.4vw, 50px); --fs-3xl: clamp(36px, 4.6vw, 68px); --fs-hero: clamp(42px, 6.2vw, 92px); --fw-body: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --lh-hero: 0.94; /* display is set tight — the scale jump is the identity */ --lh-display: 1.02; --lh-head: 1.15; --lh-body: 1.6; --lh-loose: 1.75; --ls-hero: -0.04em; --ls-display: -0.035em; --ls-head: -0.02em; --ls-eyebrow: 0.14em; --ls-mono: -0.01em; /* ==================================================================== SPACE */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --container: 1200px; --gutter: clamp(20px, 4vw, 40px); --section-py: clamp(56px, 7vw, 104px); /* =================================================================== FORM */ --r-none: 0; --r-xs: 3px; --r-sm: 4px; /* the default — flat, near-square */ --r-md: 6px; --r-pill: 999px; /* buttons only */ --bw: 1.5px; /* the hard outline weight */ --outline: var(--bw) solid var(--line-strong); --outline-soft: 1px solid var(--line); /* Elevation is expressed as a hard offset block, never a blur. This is the single most identity-carrying decision in the system. */ --block-sm: 4px 4px 0 var(--ink); --block: 8px 8px 0 var(--ink); --block-lg: 12px 12px 0 var(--ink); --block-accent: 8px 8px 0 var(--violet); --block-pop: 8px 8px 0 var(--pop-deep); /* The only blurred shadow in the system, for overlays that must float above arbitrary content (menus, toasts, modals). */ --shadow-overlay: 0 18px 40px rgba(18,16,28,.22); --focus-ring: 0 0 0 3px var(--violet-100), 0 0 0 5px var(--violet); /* ============================================== STATES / MENU / DOCS Added by spec signal-system-completion. Values compose from the palette above rather than introducing new colours. */ --skeleton: var(--ink-050); /* flat skeleton fill — never a blurred shadow */ --skeleton-hi: var(--violet-050);/* shimmer highlight, reduced-motion gated */ --field-invalid: var(--fail); --readonly-bg: var(--ink-050); /* read-only ≠ disabled: filled, not dimmed */ --nav-h: 69px; /* sticky nav height — docs columns offset by this */ --menu-w: 620px; /* mega-menu panel */ --docs-nav-w: 220px; --docs-toc-w: 200px; /* ================================================================= MOTION */ --dur-fast: 120ms; --dur: 180ms; --dur-slow: 320ms; --ease: cubic-bezier(.2,.8,.3,1); /* ==================================================================== Z */ --z-rules: 0; --z-base: 1; --z-sticky: 100; --z-menu: 200; --z-overlay: 300; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; } }