/* ============================================================================
StriveLocal — Design Tokens
Import first:
Fonts (load in ):
============================================================================ */
:root {
/* ---- Core palette -------------------------------------------------------- */
--volt: #C8FF33; /* accent — FILL/HIGHLIGHT ONLY, never text */
--volt-deep: #A9C920; /* volt pressed / shadow tint */
--volt-wash: #EAF7B0; /* volt at low strength (data viz) */
--ink: #141210; /* primary — warm near-black */
--bone: #F2F1EA; /* default light surface */
--graphite: #262329; /* raised dark panel */
--fog: #8C8C86; /* secondary / muted text */
--paper: #FBFAF6; /* raised light surface */
--ultramarine: #2945FF; /* secondary accent — CREAM ONLY, one moment per view */
--cobalt: var(--ultramarine); /* legacy alias — renamed Cobalt → Ultramarine */
/* ---- Surface ramp (light → dark warm neutrals) --------------------------- */
--surf-0: #FBFAF6;
--surf-1: #F7F6F0;
--surf-2: #F2F1EA;
--surf-3: #E4E2D8;
--surf-4: #B9B6AC;
/* ---- Supporting / status tints ------------------------------------------ */
--clay: #D2483B; /* error / negative */
--amber: #E8B23A; /* warning / pending */
--moss: #5AB05A; /* success / positive */
/* ---- Foreground roles (semantic) ---------------------------------------- */
--fg-on-light-1: var(--ink); /* primary text on bone */
--fg-on-light-2: var(--fog); /* secondary text on bone */
--fg-on-light-3: rgba(20,18,16,.45); /* tertiary / disabled on bone */
--fg-on-dark-1: var(--bone); /* primary text on ink */
--fg-on-dark-2: rgba(242,241,234,.62); /* secondary text on ink */
--fg-on-dark-3: rgba(242,241,234,.40); /* tertiary on ink */
/* ---- Borders ------------------------------------------------------------- */
--line-on-light: rgba(20,18,16,.10);
--line-on-light-strong: rgba(20,18,16,.18);
--line-on-dark: rgba(255,255,255,.12);
--line-on-dark-strong: rgba(255,255,255,.22);
--grid-on-dark: rgba(255,255,255,.06); /* technical grid lines */
/* ---- Type families ------------------------------------------------------- */
--font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
--font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
/* ---- Type scale (px) ----------------------------------------------------- */
--fs-display: 52px; --lh-display: 1.02; --wt-display: 800;
--fs-h1: 34px; --lh-h1: 1.06; --wt-h1: 700;
--fs-h2: 24px; --lh-h2: 1.12; --wt-h2: 700;
--fs-h3: 18px; --lh-h3: 1.25; --wt-h3: 600;
--fs-body: 16px; --lh-body: 1.5; --wt-body: 400;
--fs-small: 14px; --lh-small: 1.45;
--fs-label: 13px; --lh-label: 1.1; --wt-label: 500;
--fs-micro: 11px;
--track-label: 0.10em; /* mono label tracking */
--track-micro: 0.14em;
/* ---- Radius -------------------------------------------------------------- */
--r-xs: 6px;
--r-sm: 8px;
--r-md: 12px;
--r-lg: 16px;
--r-pill: 999px;
/* ---- Spacing scale ------------------------------------------------------- */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
/* ---- Elevation ----------------------------------------------------------- */
--shadow-sm: 0 1px 2px rgba(20,18,16,.05);
--shadow-md: 0 1px 2px rgba(20,18,16,.04), 0 8px 24px rgba(20,18,16,.06);
--shadow-lg: 0 2px 4px rgba(20,18,16,.05), 0 18px 48px rgba(20,18,16,.10);
/* ---- Motion -------------------------------------------------------------- */
--ease: cubic-bezier(.2,.7,.2,1);
--dur-fast: 120ms;
--dur: 180ms;
}
/* ============================================================================
Semantic type classes — apply directly to elements
============================================================================ */
.display {
font-family: var(--font-display);
font-size: var(--fs-display);
line-height: var(--lh-display);
font-weight: var(--wt-display);
letter-spacing: -0.02em;
text-wrap: balance;
}
.h1 {
font-family: var(--font-display);
font-size: var(--fs-h1); line-height: var(--lh-h1);
font-weight: var(--wt-h1); letter-spacing: -0.015em;
text-wrap: balance;
}
.h2 {
font-family: var(--font-display);
font-size: var(--fs-h2); line-height: var(--lh-h2);
font-weight: var(--wt-h2); letter-spacing: -0.01em;
}
.h3 {
font-family: var(--font-sans);
font-size: var(--fs-h3); line-height: var(--lh-h3);
font-weight: var(--wt-h3);
}
.body {
font-family: var(--font-sans);
font-size: var(--fs-body); line-height: var(--lh-body);
font-weight: var(--wt-body);
text-wrap: pretty;
}
.small { font-family: var(--font-sans); font-size: var(--fs-small); line-height: var(--lh-small); }
/* Monospace label / eyebrow — UPPERCASE, tracked. The brand's metadata voice. */
.label {
font-family: var(--font-mono);
font-size: var(--fs-label); line-height: var(--lh-label);
font-weight: var(--wt-label);
text-transform: uppercase;
letter-spacing: var(--track-label);
}
.micro {
font-family: var(--font-mono);
font-size: var(--fs-micro);
text-transform: uppercase;
letter-spacing: var(--track-micro);
color: var(--fg-on-light-2);
}
/* ============================================================================
Helpers
============================================================================ */
/* Volt highlight UNDER ink text — the only correct way to use volt with text. */
.volt-highlight {
background: linear-gradient(transparent 58%, var(--volt) 58%, var(--volt) 94%, transparent 94%);
padding: 0 .06em;
}
/* Solid volt fill block (button, sticker, stat backing). */
.volt-fill { background: var(--volt); color: var(--ink); }
/* Technical grid background for ink canvases. */
.grid-ink {
background-color: var(--ink);
background-image:
linear-gradient(var(--grid-on-dark) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-on-dark) 1px, transparent 1px);
background-size: 32px 32px;
}