/* ===================================================================== Behavioral Pulse — design tokens. Source of truth: CBD Brand Guide v1.0, via the 2026-08-28 design handoff. Every value here is the guide's published value unless marked PRODUCT ADDITION. Nothing in this file is a judgement call; the judgement is in the guide. Consume these variables — never a raw hex — anywhere in Pulse. THE ONE RULE THAT MATTERS MOST, and the reason this file exists rather than a palette of loose hexes: Brand Red and the critical state are the SAME value, #C80815. The guide prescribes the fix — give the alarm the badge and the brand the rule or the button, never the reverse. So: --pulse-brand is for the card rule and the primary button. It NEVER states severity. --pulse-risk is for badges, scores, bars and dots. It is the only way severity is expressed. They resolve to the same colour and are deliberately kept apart, because the day someone wants "the at-risk card to look at-risk" is the day the brand starts meaning alarm. An at-risk card and a healthy card have an IDENTICAL left edge. That is the design, not an oversight, and it must not be "fixed". ===================================================================== */ :root { /* ---------- surfaces and ink ---------- */ --pulse-canvas: #FAF8F5; /* default page background */ --pulse-surface: #FFFFFF; /* cards */ --pulse-surface-alt: #FFFDFC; /* sidebar */ --pulse-tint: #F3EFE9; /* quiet fills, bar tracks, diagram grounds */ --pulse-hairline: #EAE4DE; /* EVERY border in the console */ --pulse-hairline-faint:#F0EBE6; /* table row dividers only */ --pulse-ink: #1D1518; /* body, headings 15.6:1 on cream */ --pulse-ink-soft: #4A4146; /* all secondary copy 9.3:1 */ --pulse-ink-faint: #5F5458; /* eyebrows, hints, ticks 6.9:1 */ /* Never express ink as an alpha over canvas — use the named values above. These few alpha ramps are the guide's own, for borders and marks only. */ --pulse-ink-a14: rgba(29,21,24,.14); --pulse-ink-a32: rgba(29,21,24,.32); --pulse-ink-a45: rgba(29,21,24,.45); /* drawer scrim */ /* ---------- brand ---------- */ --pulse-brand: #C80815; /* card left rule, primary button, logo */ --pulse-press: #A30611; /* anything small and red */ --pulse-oxblood: #2B0B0E; /* one deep band per surface */ --pulse-amber: #FFBF00; /* the eyebrow dot. Nothing else. */ --pulse-brand-wash: #FDECEC; /* active nav, active step pill */ --pulse-brand-wash-2: #FDF1F1; /* upsell card */ /* ---------- semantic scale ---------- Large/fill, small type, and tint are three DIFFERENT values per state. Small red type uses Press Red so it clears AA at small sizes. */ --pulse-healthy: #2E7D32; --pulse-healthy-sm: #2E7D32; --pulse-healthy-tint: rgba(46,125,50,.10); --pulse-healthy-block: rgba(46,125,50,.07); /* "What's working" ground */ --pulse-watch: #A4740A; --pulse-watch-sm: #8A6008; --pulse-watch-tint: rgba(164,116,10,.10); --pulse-risk: #C80815; --pulse-risk-sm: #A30611; --pulse-risk-tint: rgba(200,8,21,.09); --pulse-progress: #2563EB; --pulse-progress-sm: #2563EB; --pulse-progress-tint: rgba(37,99,235,.10); /* No reading — PRODUCT ADDITION. A signal that was not asked about is not a zero and not an omission; it keeps its row and says so. */ --pulse-noread: #7A6F72; --pulse-noread-tint: rgba(29,21,24,.04); --pulse-noread-hatch: repeating-linear-gradient(45deg, #F3EFE9, #F3EFE9 3px, #E6E0D7 3px, #E6E0D7 6px); /* ---------- type ---------- */ --pulse-serif: "Fraunces", "Iowan Old Style", Georgia, serif; --pulse-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --pulse-mono: "Space Grotesk", ui-monospace, "SF Mono", Menlo, monospace; /* ---------- radii — 10 / 14 / 16 / 20 only ---------- */ --pulse-r-xs: 6px; /* checkboxes, tiny swatches, bar tracks */ --pulse-r-sm: 10px; /* inner panels, note blocks */ --pulse-r: 14px; /* ALL cards, drawer items, phone blocks */ --pulse-r-lg: 16px; --pulse-r-pill: 20px; /* pills, chips, badges, buttons (20–24) */ /* ---------- elevation — two levels, oxblood-tinted, never grey ---------- */ --pulse-shadow: 0 1px 2px rgba(43,11,14,.04), 0 4px 14px rgba(43,11,14,.05); --pulse-shadow-raised:0 2px 6px rgba(43,11,14,.05), 0 16px 40px rgba(43,11,14,.09); --pulse-shadow-drawer:16px 0 40px rgba(43,11,14,.09); /* ---------- the one gradient in the product ---------- */ --pulse-page-bg: linear-gradient(155deg, #FDF3F2 0%, #FAF8F5 34%); /* ---------- layout ---------- */ --pulse-sidebar-w: 206px; --pulse-drawer-w: 306px; --pulse-rail-w: 306px; } /* ===================================================================== TYPE ROLES Three faces, no fourth. Fraunces for display and questions (never all-caps), Inter for interface and body, Space Grotesk for every number, date, identifier and eyebrow. Applied as classes so a role is named once and a size is never guessed at a call site. ===================================================================== */ .pt-display { font:500 34px/1.15 var(--pulse-serif); letter-spacing:-.015em; color:var(--pulse-ink); } .pt-title { font:600 30px/1.12 var(--pulse-serif); letter-spacing:-.015em; color:var(--pulse-ink); text-wrap:balance; } .pt-h2 { font:600 20px/1.15 var(--pulse-serif); color:var(--pulse-ink); text-wrap:balance; } .pt-h3 { font:600 17px/1.2 var(--pulse-serif); color:var(--pulse-ink); } .pt-card { font:600 15.5px/1.3 var(--pulse-sans); color:var(--pulse-ink); } .pt-row { font:500 13px/1.35 var(--pulse-sans); color:var(--pulse-ink); } .pt-body { font:400 12.5px/1.65 var(--pulse-sans); color:var(--pulse-ink-soft); } .pt-secondary { font:400 11.5px/1.55 var(--pulse-sans); color:var(--pulse-ink-soft); } .pt-fine { font:400 11px/1.5 var(--pulse-sans); color:var(--pulse-ink-faint); } /* Numbers. Tabular wherever figures align in a column — a score that shifts left by a digit reads as a different measurement. */ .pt-score { font:700 30px/1 var(--pulse-mono); letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .pt-score-row { font:600 14px/1 var(--pulse-mono); font-variant-numeric:tabular-nums; } .pt-meta { font:400 11.5px/1.4 var(--pulse-mono); color:var(--pulse-ink-faint); font-variant-numeric:tabular-nums; } /* Column header — the table's own eyebrow. */ .pt-col { font:700 9.5px/1 var(--pulse-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--pulse-press); } /* ===================================================================== EYEBROW — one per surface, at the top of the content column. The amber dot lives here and NOWHERE else in the product: no amber fills, no amber text, no amber progress bars. It is the single warm accent, and it only works because it is rationed to one 5px dot per screen. ===================================================================== */ .pulse-eyebrow { display:flex; align-items:center; gap:7px; font:700 10px/1 var(--pulse-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--pulse-press); } .pulse-eyebrow::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--pulse-amber); flex:none; } /* ===================================================================== CARD The 3px left rule is Brand Red on EVERY card regardless of band. See the header of this file: severity is carried by badges, scores, bars and dots, never by the card edge. ===================================================================== */ .pulse-card { position:relative; background:var(--pulse-surface); border:1px solid var(--pulse-hairline); border-radius:var(--pulse-r); box-shadow:var(--pulse-shadow); padding:18px 20px; overflow:hidden; } .pulse-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--pulse-brand); } .pulse-card--raised { box-shadow:var(--pulse-shadow-raised); } .pulse-card--flat::before { display:none; } /* Deep band — one per surface. */ .pulse-band { background:var(--pulse-oxblood); color:#fff; border-radius:var(--pulse-r); padding:20px 22px; } .pulse-band .pt-body, .pulse-band .pt-secondary { color:rgba(255,255,255,.68); } /* ===================================================================== BADGES AND PILLS A badge states severity; a button states brand. Both are pills, and the difference between them is the whole colour discipline of the product. ===================================================================== */ .pulse-badge { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; padding:3px 9px; border-radius:var(--pulse-r-pill); font:600 9.5px/1.6 var(--pulse-mono); letter-spacing:.08em; text-transform:uppercase; } .pulse-badge--healthy { background:var(--pulse-healthy-tint); color:var(--pulse-healthy-sm); } .pulse-badge--watch { background:var(--pulse-watch-tint); color:var(--pulse-watch-sm); } .pulse-badge--risk { background:var(--pulse-risk-tint); color:var(--pulse-risk-sm); } .pulse-badge--progress { background:var(--pulse-progress-tint); color:var(--pulse-progress-sm); } .pulse-badge--noread { background:var(--pulse-noread-tint); color:var(--pulse-noread); } .pulse-badge--quiet { background:transparent; color:var(--pulse-ink-soft); box-shadow:inset 0 0 0 1px var(--pulse-ink-a14); } .pulse-dot { width:6px; height:6px; border-radius:50%; flex:none; } .pulse-dot--healthy { background:var(--pulse-healthy); } .pulse-dot--watch { background:var(--pulse-watch); } .pulse-dot--risk { background:var(--pulse-risk); } .pulse-dot--progress { background:var(--pulse-progress); } .pulse-dot--noread { background:var(--pulse-noread); } .pulse-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding:0 18px; border-radius:24px; border:0; cursor:pointer; font:600 13px/1 var(--pulse-sans); white-space:nowrap; transition:background .15s ease-out, border-color .15s ease-out; } .pulse-btn--primary { background:var(--pulse-brand); color:#fff; } .pulse-btn--primary:hover { background:var(--pulse-press); } .pulse-btn--outline { background:var(--pulse-surface); color:var(--pulse-ink); box-shadow:inset 0 0 0 1px var(--pulse-ink-a14); } .pulse-btn--outline:hover { box-shadow:inset 0 0 0 1px var(--pulse-ink-a32); } .pulse-btn:focus-visible { outline:2px solid var(--pulse-press); outline-offset:2px; } /* ===================================================================== MOTION Nothing longer than 200ms. ease-out in, ease-in out. The ONLY animated state in the product is `activating`, which is a genuine in-flight operation — no animated number counters anywhere, because they imply a live measurement that is not happening. ===================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }