/* Amplitude — brand tokens for Web. Derived from tokens.json (v0.2.1, 2026-06-20). * 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%); /* — semantic status (clinical UI; muted, always paired with an icon — never color alone) — * Chrome only: the never-red-as-failure rule is for the PATIENT feedback surface, not here. */ --amp-status-ok: #2f8f63; --amp-status-ok-tint: #e4f1ea; --amp-status-ok-on-tint: #1f6444; --amp-status-warn: #9a6b1f; --amp-status-warn-tint: #f6ecd8; --amp-status-warn-on-tint: #6b4d18; --amp-status-danger: #b34a44; --amp-status-danger-tint: #f6e3e1; --amp-status-danger-on-tint: #7e2f2b; --amp-status-info: #506bb4; --amp-status-info-tint: #e6ebf7; --amp-status-info-on-tint: #506bb4; /* — frosted-glass chrome (UI panels: chatbot, cards) — CSS backdrop-filter, not the brain shader. * Canon = the chatbot PANEL set (Web's working actuals). Use .amp-glass; --card / --launcher modify. */ --amp-glass-bg: color-mix(in srgb, var(--amp-surface-raised) 82%, transparent); --amp-glass-blur: 22px; --amp-glass-saturate: 1.7; --amp-glass-highlight: rgba(255, 255, 255, 0.70); /* inset top 1px hairline */ --amp-glass-shadow: 0 24px 70px rgba(40, 52, 80, 0.28); --amp-glass-radius: var(--amp-radius-lg); /* — 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%); /* status lifted for legibility on dark; tints become low-alpha washes of the hue */ --amp-status-ok: #5fc395; --amp-status-ok-tint: rgba(95, 195, 149, 0.16); --amp-status-ok-on-tint: #8fdcb6; --amp-status-warn: #d6a24e; --amp-status-warn-tint: rgba(214, 162, 78, 0.16); --amp-status-warn-on-tint: #e6c184; --amp-status-danger: #e08079; --amp-status-danger-tint: rgba(224, 128, 121, 0.16); --amp-status-danger-on-tint: #f0a8a2; --amp-status-info: #8ea0d8; --amp-status-info-tint: rgba(142, 160, 216, 0.16); --amp-status-info-on-tint: #aab8e6; --amp-glass-bg: color-mix(in srgb, var(--amp-surface-raised) 72%, transparent); --amp-glass-highlight: rgba(255, 255, 255, 0.10); --amp-glass-shadow: 0 24px 70px rgba(0, 0, 0, 0.45); } /* Frosted-glass panel helper — apply to chatbot/cards. backdrop-filter needs a translucent --amp-glass-bg. * Modifiers: .amp-glass--card (lighter, inline cards) · .amp-glass--launcher (pill, periwinkle-tinted). */ .amp-glass { background: var(--amp-glass-bg); -webkit-backdrop-filter: blur(var(--amp-glass-blur)) saturate(var(--amp-glass-saturate)); backdrop-filter: blur(var(--amp-glass-blur)) saturate(var(--amp-glass-saturate)); border-radius: var(--amp-glass-radius); box-shadow: var(--amp-glass-shadow), inset 0 1px 0 var(--amp-glass-highlight); border: 1px solid var(--amp-hairline); } .amp-glass--card { --amp-glass-blur: 16px; --amp-glass-shadow: 0 12px 40px rgba(40, 52, 80, 0.16); } .amp-glass--launcher { --amp-glass-bg: color-mix(in srgb, var(--amp-surface-raised) 78%, transparent); --amp-glass-blur: 14px; --amp-glass-saturate: 1.6; --amp-glass-highlight: rgba(255, 255, 255, 0.60); --amp-glass-shadow: 0 8px 28px rgba(70, 95, 165, 0.18); --amp-glass-radius: var(--amp-radius-pill); } /* 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); }