/* Amplitude — brand tokens for Web. Derived from tokens.json (v0.1.0, 2026-06-18). * Drop in and reference via var(--amp-*). Web wired its placeholder to these names — * this is the canonical replacement. Light is the primary surface; .amp-dark flips it. */ :root { /* — text — */ --amp-ink: #2a3450; --amp-ink-secondary: #5d6a86; --amp-ink-tertiary: #8a93a8; /* — accent (periwinkle) — */ --amp-accent: #6f86c9; --amp-accent-strong: #506bb4; --amp-accent-soft: #aab8e0; --amp-accent-tint: #e6ebf7; /* — surfaces — */ --amp-surface: #f4f6fa; --amp-surface-sunken: #e7ebf3; --amp-surface-raised: #ffffff; --amp-hairline: #dde2ec; /* page background = the brand's signature soft vertical wash */ --amp-bg-gradient: linear-gradient(180deg, var(--amp-surface) 0%, var(--amp-surface-sunken) 100%); /* — type — */ --amp-font-display: ui-rounded, "SF Pro Rounded", "SF Pro Display", system-ui, sans-serif; --amp-font-body: "SF Pro Text", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --amp-font-mono: ui-monospace, "SF Mono", Menlo, monospace; --amp-weight-regular: 400; --amp-weight-medium: 500; --amp-weight-semibold:600; --amp-weight-bold: 700; --amp-wordmark-tracking: 0.01em; /* — type scale (px) — */ --amp-text-caption: 13px; --amp-text-body: 16px; --amp-text-h4: 20px; --amp-text-h3: 25px; --amp-text-h2: 31px; --amp-text-h1: 39px; --amp-text-display: 49px; /* — space (4px grid) — */ --amp-space-1: 4px; --amp-space-2: 8px; --amp-space-3: 12px; --amp-space-4: 16px; --amp-space-5: 24px; --amp-space-6: 32px; --amp-space-7: 48px; --amp-space-8: 64px; /* — radius — */ --amp-radius-sm: 10px; --amp-radius-md: 18px; --amp-radius-lg: 22px; --amp-radius-pill: 999px; /* — motion — */ --amp-duration-fast: 120ms; --amp-duration-base: 240ms; --amp-duration-slow: 420ms; --amp-ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0); } /* Secondary dark surface — for hero / splash. Apply on a wrapper: */ .amp-dark { --amp-ink: #eef1f7; --amp-ink-secondary: #aab2c4; --amp-accent: #8ea0d8; --amp-surface: #161a24; --amp-surface-sunken: #0e1118; --amp-surface-raised: #1e2330; --amp-hairline: #2a3142; --amp-bg-gradient: linear-gradient(180deg, var(--amp-surface) 0%, var(--amp-surface-sunken) 100%); } /* Wordmark helper — set "amplitude" lowercase, rounded, lightly tracked. */ .amp-wordmark { font-family: var(--amp-font-display); font-weight: var(--amp-weight-regular); letter-spacing: var(--amp-wordmark-tracking); text-transform: lowercase; color: var(--amp-ink); }