/* Thermal Sky — design tokens (v2)
Fonts are NOT imported here. Load in HTML :
Michroma removed: tagline is baked into logo assets, never rendered as live text on the site.
*/
:root {
/* Scheme A "Instrument" (chosen 2026-08-22 from compare.html). Cool neutral
near-black, no violet in the UI; the logo carries the violet. One signal
colour: the sampled amber end of the SKY gradient. All ratios measured. */
/* primary */
--ts-void: #0C0D10; /* page background */
--ts-graphite: #15171B; /* cards, surfaces; 1.08:1 off Void. Borders do the hierarchy. */
--ts-paper: #F5F1EA; /* headlines, logo THERMAL, light surfaces. 17.3:1 on Void */
--ts-paper-text: #E4E1DA;/* body text on dark. 14.9:1 on Void, 13.7:1 on Graphite (AAA) */
--ts-rose: #F34C60; /* UI error state only: the logo rose, sampled from the start of SKY.
5.6:1 Void, 5.1:1 Graphite (AA at 14px). Inline field errors,
invalid input border, submit failure alert. */
--ts-ember: #FFA33A; /* primary button fill = signal amber (sampled). 9.8:1 vs Void */
--ts-amber: #FFA33A; /* leading price figures, focus ring. Same signal colour */
/* supporting */
--ts-slate: #3A3444; /* secondary text on light */
--ts-mist: #AEABA5; /* secondary prose on dark: captions, hints, FAQ answers,
quiet figures. 8.5:1 Void, 7.8:1 Graphite (AAA).
Also the secondary-button and nav-cta border (8.5:1, clears 3:1). */
--ts-label: #8F949D; /* mono eyebrows and labels, 10-13px. 6.4:1 Void, 5.9:1 Graphite (AA).
Also the input border (5.9:1 on Graphite). */
--ts-violet: #6D28D9; /* unused in UI; logo only */
--ts-hairline: #2B2E35; /* borders on cards, sections, cells. 1.43:1 on Void: visible, quiet. */
--ts-ink: #0C0D10; /* label colour on amber fills. 9.8:1 */
/* links */
--ts-link: #FFA33A; /* 9.8:1 Void, 9.0:1 Graphite */
--ts-link-hover: #FFAE3B; /* 10.5:1 Void */
--ts-btn-hover: #FFAE3B;
/* logo gradients, never general UI. Mirrors the colours baked into the
logo SVG files; do not swap for the tokens above. */
--ts-gradient-dark: linear-gradient(90deg, #F0446B, #FF6B35, #FFC53D);
--ts-gradient-light: linear-gradient(90deg, #D6218F, #F05A32, #C97808);
/* type */
--ts-font-display: 'Archivo', sans-serif; /* weight 900, font-stretch 118% */
--ts-font-body: 'Space Grotesk', sans-serif;
--ts-font-mono: 'IBM Plex Mono', monospace;
/* fluid type: min mobile → max desktop */
--ts-text-display: clamp(38px, 6.5vw, 64px);
--ts-text-h1: clamp(34px, 5.5vw, 56px);
--ts-text-h2: clamp(24px, 3.5vw, 32px);
--ts-text-h3: clamp(19px, 2.5vw, 22px);
--ts-text-body: 17px;
--ts-text-small: 14px;
--ts-text-eyebrow: 11px;
/* space */
--ts-space-1: 4px; --ts-space-2: 8px; --ts-space-3: 12px;
--ts-space-4: 16px; --ts-space-5: 24px; --ts-space-6: 32px;
--ts-space-7: 48px; --ts-space-8: 80px; --ts-space-9: 120px;
/* shape + motion */
--ts-radius-chip: 6px;
--ts-radius-input: 8px;
--ts-radius-panel: 12px;
--ts-radius-card: 16px;
--ts-ease: cubic-bezier(.2,.7,.3,1);
--ts-dur: 180ms;
--ts-content-max: 1140px;
}
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
background: var(--ts-void);
color: var(--ts-paper-text);
font: 400 var(--ts-text-body)/1.6 var(--ts-font-body);
-webkit-font-smoothing: antialiased;
}
a { color: var(--ts-link); }
a:hover { color: var(--ts-link-hover); }
/* keyboard focus — visible on dark, never removed */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--ts-amber);
outline-offset: 2px;
}
.ts-display {
font-family: var(--ts-font-display);
font-weight: 900;
font-stretch: 118%;
line-height: 1.02;
letter-spacing: .5px;
}
.ts-eyebrow {
font: 500 var(--ts-text-eyebrow) var(--ts-font-mono);
letter-spacing: 2px;
text-transform: uppercase;
color: var(--ts-label);
}
.ts-card {
background: var(--ts-graphite);
border: 1px solid var(--ts-hairline);
border-radius: var(--ts-radius-card);
padding: var(--ts-space-6);
}
.ts-panel {
background: var(--ts-void);
border-radius: var(--ts-radius-panel);
padding: var(--ts-space-6);
}
.ts-btn {
font: 500 15px var(--ts-font-body);
background: var(--ts-ember);
color: var(--ts-ink);
border: 0;
border-radius: var(--ts-radius-input);
padding: 12px 22px;
cursor: pointer;
transition: background var(--ts-dur) var(--ts-ease);
}
.ts-btn:hover { background: var(--ts-btn-hover); }
.ts-btn-secondary {
font: 500 15px var(--ts-font-body);
background: transparent;
color: var(--ts-paper-text);
/* Mist, not hairline: a button boundary owes 3:1. Mist is 8.5:1 on Void. */
border: 1px solid var(--ts-mist);
border-radius: var(--ts-radius-input);
padding: 12px 22px;
cursor: pointer;
transition: border-color var(--ts-dur) var(--ts-ease);
}
.ts-btn-secondary:hover { border-color: var(--ts-paper-text); }
/* SKY in the wordmark, and hero-scale graphics only.
Solid Amber fallback first; gradient only where supported (BRAND.md rule). */
.ts-heat-text { color: var(--ts-amber); }
@supports (background-clip: text) or (-webkit-background-clip: text) {
.ts-heat-text {
background: var(--ts-gradient-dark);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
}
/* motion off for users who ask for it */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}