/* ============================================================
SETTLEBOLT · Brand tokens
Light theme · black-on-white · thin type
Hand these to the lander build. Import Inter once in :
============================================================ */
:root {
/* — Color (monochrome light theme) — */
--sb-bg: #FFFFFF; /* page background */
--sb-bg-soft: #FAFAFA; /* section / card fill */
--sb-ink: #0B0B0C; /* primary text + logo */
--sb-ink-2: #3A3A3E; /* secondary text */
--sb-muted: #6B6B70; /* captions, meta */
--sb-line: #E6E6E8; /* hairline borders/dividers */
--sb-line-2: #F0F0F1; /* faint fills */
/* Optional electric accent — OFF by default to keep it pure B/W.
Flip --sb-accent to var(--sb-volt) if you ever want a charge of color. */
--sb-volt: #2E5BFF;
--sb-accent: var(--sb-ink);
/* — Type — */
--sb-font: 'Inter','Helvetica Neue','Segoe UI',system-ui,-apple-system,sans-serif;
--sb-w-thin: 200; /* display / wordmark */
--sb-w-light: 300; /* body */
--sb-w-reg: 400; /* emphasis */
--sb-w-med: 500; /* buttons / labels */
--sb-track-tight: -0.01em; /* large headings */
--sb-track-wide: 0.02em; /* logo / overline */
/* — Scale — */
--sb-fs-hero: clamp(40px, 6vw, 80px);
--sb-fs-h2: clamp(28px, 4vw, 44px);
--sb-fs-lead: clamp(18px, 2vw, 22px);
--sb-fs-body: 16px;
--sb-fs-small: 13px;
/* — Shape / motion — */
--sb-radius: 14px;
--sb-radius-pill: 999px;
--sb-gap: 24px;
--sb-maxw: 1120px;
--sb-ease: cubic-bezier(.2,.7,.2,1);
}
/* — Base — */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
margin: 0;
background: var(--sb-bg);
color: var(--sb-ink);
font-family: var(--sb-font);
font-weight: var(--sb-w-light);
font-size: var(--sb-fs-body);
line-height: 1.55;
}
/* — Display / headings stay thin — */
h1, .sb-display {
font-weight: var(--sb-w-thin);
font-size: var(--sb-fs-hero);
letter-spacing: var(--sb-track-tight);
line-height: 1.05;
margin: 0;
}
h2 {
font-weight: var(--sb-w-thin);
font-size: var(--sb-fs-h2);
letter-spacing: var(--sb-track-tight);
line-height: 1.1;
margin: 0;
}
.sb-lead { font-size: var(--sb-fs-lead); color: var(--sb-ink-2); font-weight: var(--sb-w-light); }
.sb-over { font-size: var(--sb-fs-small); text-transform: uppercase; letter-spacing: .14em;
color: var(--sb-muted); font-weight: var(--sb-w-med); }
/* — Logo wordmark (when set in HTML rather than as SVG) — */
.sb-logo {
display: inline-flex; align-items: center; gap: 12px;
color: var(--sb-ink); text-decoration: none;
}
.sb-logo svg { display: block; height: 28px; width: auto; }
.sb-logo__text {
font-weight: var(--sb-w-thin);
font-size: 24px;
letter-spacing: .02em;
}
/* — Buttons — */
.sb-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 22px; border-radius: var(--sb-radius-pill);
font-family: var(--sb-font); font-weight: var(--sb-w-med); font-size: 15px;
text-decoration: none; cursor: pointer; border: 1px solid transparent;
transition: transform .15s var(--sb-ease), background .15s var(--sb-ease), color .15s var(--sb-ease);
}
.sb-btn--primary { background: var(--sb-ink); color: #fff; }
.sb-btn--primary:hover { transform: translateY(-1px); }
.sb-btn--ghost { background: transparent; color: var(--sb-ink); border-color: var(--sb-line); }
.sb-btn--ghost:hover { border-color: var(--sb-ink); }
/* — Helpers — */
.sb-wrap { max-width: var(--sb-maxw); margin-inline: auto; padding-inline: 24px; }
.sb-hr { border: 0; border-top: 1px solid var(--sb-line); }