/* ==========================================================================
Third Rock Analytics — Design Tokens
v2.0 · Earthbound · May 2026
The original (v1) palette was a cool, technical signal-blue + void system.
v2 re-anchors the brand in the colors of the actual logo: Sun, Mercury,
Venus, and Earth. Warm, grounded, with deep-space cool as a counterweight.
"A grounded view from a great height."
========================================================================== */
/* ── FONTS ────────────────────────────────────────────────────────────────
Add to :
────────────────────────────────────────────────────────────────────── */
:root {
/* ── BASE COLORS ──────────────────────────────────────────────────────
Named after celestial / geological things. Pulled directly from the
four orbs in the wordmark, plus the dark of space and the cream of
old field-survey paper.
─────────────────────────────────────────────────────────────────── */
/* Sun — warm primary. The big golden orb on the left of the logo. */
--color-sun: #D4A03A;
--color-sun-deep: #B5832A;
--color-sun-soft: #E8C77A;
--color-sun-wash: #F6E9C4;
--color-sun-tint: rgba(212, 160, 58, 0.12);
--color-sun-tint-sm: rgba(212, 160, 58, 0.06);
/* Earth — deep blue, the rightmost orb. Cool counterweight to Sun. */
--color-earth: #345A78;
--color-earth-deep: #234159;
--color-earth-soft: #6F92AC;
--color-earth-wash: #D6E1EB;
--color-earth-tint: rgba(52, 90, 120, 0.10);
/* Venus — the warm tan orb between Mercury and Earth. */
--color-venus: #C9A876;
--color-venus-soft: #E2CFA8;
/* Mercury — the small grey orb. Stone-like, neutral-warm. */
--color-mercury: #8A8074;
/* Loam — deep warm near-black for dark surfaces. Soil, not void. */
--color-loam: #1F1A14;
--color-loam-light: #2A241B;
--color-loam-surface: #2F2820;
--color-loam-border: rgba(246, 241, 231, 0.08);
/* Earth-tone neutrals (warm grays). All shifted toward yellow-brown
rather than blue-grey. */
--color-bone: #FBF7EE; /* warmest paper white */
--color-cream: #F6F1E7; /* page background */
--color-sand: #ECE5D4; /* surface */
--color-sand-2: #DFD6BF; /* surface raised */
--color-stone: #C9BFA8; /* border / hairline strong */
--color-stone-soft: #DDD4BD; /* border / hairline */
--color-clay: #8B7F6D; /* muted text */
--color-bark: #3D352A; /* body text */
--color-soil: #1F1A14; /* heading text (same as loam) */
--color-paper: #FFFFFF; /* pure white card */
/* Data-layer accents — for charts, layer swatches, status pills.
Keep these earthy. */
--color-moss: #6B7A5A; /* lichen / vegetation */
--color-moss-soft: #D6DCC4;
--color-rust: #B5683E; /* terracotta, iron oxide */
--color-rust-soft: #ECCFB8;
--color-sky: #95B3C7; /* atmosphere, info */
--color-sky-soft: #D6E1EB;
/* ── SEMANTIC ALIASES ─────────────────────────────────────────────── */
--color-primary: var(--color-sun);
--color-primary-dark: var(--color-sun-deep);
--color-primary-soft: var(--color-sun-soft);
--color-primary-tint: var(--color-sun-tint);
--color-accent: var(--color-earth);
--color-accent-dark: var(--color-earth-deep);
--color-bg: var(--color-cream);
--color-surface: var(--color-sand);
--color-surface-2: var(--color-sand-2);
--color-border: var(--color-stone-soft);
--color-border-strong: var(--color-stone);
--color-muted: var(--color-clay);
--color-body: var(--color-bark);
--color-heading: var(--color-soil);
/* Foreground roles — generic FG variables for layout code */
--fg-1: var(--color-soil); /* primary text */
--fg-2: var(--color-bark); /* body */
--fg-3: var(--color-clay); /* muted */
--fg-on-dark: #F6F1E7;
--fg-on-primary: #1F1A14; /* gold is bright — dark text on it */
/* Status (warmed) */
--color-success: var(--color-moss);
--color-success-bg: var(--color-moss-soft);
--color-success-text: #44503A;
--color-warning: #C99547;
--color-warning-bg: #F8E7C0;
--color-warning-text: #85591A;
--color-error: #B5562E;
--color-error-bg: #F4D7C5;
--color-error-text: #7A371A;
--color-info: var(--color-earth);
--color-info-bg: var(--color-earth-wash);
--color-info-text: var(--color-earth-deep);
/* ── TYPOGRAPHY ───────────────────────────────────────────────────── */
/* Display — Bricolage Grotesque: humanist, optical-size variable,
warmer & softer than Space Grotesk. */
--font-display: 'Bricolage Grotesque', 'DM Sans', 'Helvetica Neue', sans-serif;
/* Body — DM Sans: kept from v1. Warm geometric workhorse. */
--font-body: 'DM Sans', 'Helvetica Neue', sans-serif;
/* Editorial / serif accent — Newsreader. For pull-quotes, lat/long
coordinates set as numerals, and rare large editorial moments
(case study headlines, footer signature). Use sparingly. */
--font-serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
/* Mono — JetBrains Mono. For data, EPSG codes, coordinates,
tabular figures. */
--font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'Courier New', monospace;
/* Type scale (root 16px) */
--text-2xs: 0.625rem; /* 10px — micro-labels, footer fine print */
--text-xs: 0.6875rem; /* 11px — labels, tags, table headers */
--text-sm: 0.8125rem; /* 13px — secondary UI text */
--text-base: 0.9375rem; /* 15px — body */
--text-md: 1rem; /* 16px — emphasized body */
--text-lg: 1.125rem; /* 18px — lead, intro */
--text-xl: 1.375rem; /* 22px — H4 / card titles */
--text-2xl: 1.75rem; /* 28px — H3 */
--text-3xl: 2.125rem; /* 34px — H2 */
--text-4xl: 2.75rem; /* 44px — H1 */
--text-5xl: 3.625rem; /* 58px — display */
--text-6xl: 4.75rem; /* 76px — hero display */
--leading-tight: 1.1;
--leading-snug: 1.25;
--leading-base: 1.55;
--leading-relaxed: 1.7;
--tracking-tight: -0.02em;
--tracking-base: 0em;
--tracking-wide: 0.06em;
--tracking-wider: 0.12em;
/* ── SPACING ──────────────────────────────────────────────────────── */
--space-px: 1px;
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 0.75rem; /* 12 */
--space-4: 1rem; /* 16 */
--space-5: 1.25rem; /* 20 */
--space-6: 1.5rem; /* 24 */
--space-8: 2rem; /* 32 */
--space-10: 2.5rem; /* 40 */
--space-12: 3rem; /* 48 */
--space-16: 4rem; /* 64 */
--space-20: 5rem; /* 80 */
--space-24: 6rem; /* 96 */
--space-32: 8rem; /* 128 */
/* ── RADII ───────────────────────────────────────────────────────────
A touch softer than v1 — earth tones want rounder edges. Still
restrained, not pillow-y. */
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 22px;
--radius-2xl: 32px;
--radius-full: 9999px;
/* ── SHADOWS ─────────────────────────────────────────────────────────
Warm shadows — tinted toward soil, not black. Use sparingly. */
--shadow-sm: 0 1px 2px rgba(31, 26, 20, 0.06);
--shadow-md: 0 2px 10px rgba(31, 26, 20, 0.07), 0 1px 3px rgba(31, 26, 20, 0.05);
--shadow-lg: 0 12px 30px rgba(31, 26, 20, 0.10), 0 3px 8px rgba(31, 26, 20, 0.05);
--shadow-glow: 0 0 0 4px rgba(212, 160, 58, 0.18);
/* Inner shadow for "carved" earth-tone surfaces */
--shadow-inner: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(31, 26, 20, 0.04);
/* ── MOTION ──────────────────────────────────────────────────────────
Easings are softer than v1's eases. "Settling" rather than "clicking". */
--ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); /* gentle land */
--ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
--transition-fast: 140ms var(--ease-out-soft);
--transition-base: 220ms var(--ease-out-soft);
--transition-slow: 360ms var(--ease-out-soft);
--transition-reveal: 280ms var(--ease-out-soft);
}
/* ── SEMANTIC ELEMENT STYLES ────────────────────────────────────────────
Drop these in for an out-of-the-box-branded page.
────────────────────────────────────────────────────────────────────── */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--fg-2);
background: var(--color-cream);
line-height: var(--leading-base);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'ss01', 'kern';
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
color: var(--fg-1);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-tight);
font-weight: 500;
font-variation-settings: 'opsz' 24;
text-wrap: balance;
}
h1 {
font-size: var(--text-4xl);
font-weight: 600;
font-variation-settings: 'opsz' 64;
letter-spacing: -0.025em;
}
h2 {
font-size: var(--text-3xl);
font-weight: 500;
font-variation-settings: 'opsz' 48;
}
h3 { font-size: var(--text-2xl); font-variation-settings: 'opsz' 32; }
h4 { font-size: var(--text-xl); font-variation-settings: 'opsz' 24; }
h5 { font-size: var(--text-lg); font-variation-settings: 'opsz' 18; }
h6 { font-size: var(--text-md); font-variation-settings: 'opsz' 16; font-weight: 600; }
.display {
font-family: var(--font-display);
font-size: clamp(var(--text-4xl), 7vw, var(--text-6xl));
font-weight: 600;
font-variation-settings: 'opsz' 96;
color: var(--fg-1);
line-height: 1.02;
letter-spacing: -0.03em;
text-wrap: balance;
}
.display-serif {
font-family: var(--font-serif);
font-size: clamp(var(--text-4xl), 7vw, var(--text-6xl));
font-weight: 400;
font-variation-settings: 'opsz' 72;
color: var(--fg-1);
line-height: 1.05;
letter-spacing: -0.015em;
font-style: italic;
}
.eyebrow {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: 500;
color: var(--color-sun-deep);
letter-spacing: var(--tracking-wider);
text-transform: uppercase;
}
.label {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: 500;
color: var(--fg-3);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.lead {
font-size: var(--text-lg);
color: var(--fg-3);
line-height: var(--leading-relaxed);
font-weight: 300;
text-wrap: pretty;
max-width: 60ch;
}
.mono {
font-family: var(--font-mono);
font-size: var(--text-sm);
color: var(--fg-2);
font-feature-settings: 'tnum';
}
.serif {
font-family: var(--font-serif);
font-style: italic;
}
p {
margin-bottom: var(--space-4);
text-wrap: pretty;
max-width: 65ch;
}
p:last-child { margin-bottom: 0; }
a {
color: var(--color-earth);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
transition: color var(--transition-fast);
}
a:hover { color: var(--color-earth-deep); }