/* ─────────────────────────────────────────────────────────────────────
3two1ads — Colors & Type (v2 — readability-first)
Canonical tokens, aligned to Brand Guide v1.0 (April 2026),
with type system updated for Shopify merchants (37yo) + US SMB owners (57yo).
Load this on every surface. Semantic tokens below primitives.
───────────────────────────────────────────────────────────────────── */
/* Fonts load via tags in the HTML (CSP-friendly). */
:root {
/* ═════ COLOR PRIMITIVES (unchanged from brand guide) ═════════════ */
/* Evergreen — PRIMARY BRAND */
--evergreen-50: #E7EFEB;
--evergreen-100: #C9DBD1;
--evergreen-200: #94B8A4;
--evergreen-300: #5F9678;
--evergreen-400: #2F7355;
--evergreen-500: #1A5C43;
--evergreen-600: #14543D;
--evergreen-700: #114F38;
--evergreen-800: #0F4C3A; /* brand core */
--evergreen-900: #0A3529;
--evergreen-950: #051A14;
/* Gold — ACCENT */
--gold-50: #FBF6E6;
--gold-100: #F6ECCC;
--gold-200: #EDD999;
--gold-300: #E4C766;
--gold-400: #DCB74C;
--gold-500: #D4A73A;
--gold-600: #B08A2D;
--gold-700: #8A6C22;
--gold-800: #5F4A17;
--gold-900: #3A2D0E;
/* Brick — CTA */
--brick-50: #FBECEA;
--brick-100: #F6D4CF;
--brick-200: #EAA69C;
--brick-300: #DB7769;
--brick-400: #C1554A;
--brick-500: #A8342A;
--brick-600: #8A2A22;
--brick-700: #7C2519; /* hover */
--brick-800: #551912;
--brick-900: #2B0C09;
/* Slate — TRUST */
--slate-50: #EAF0F5;
--slate-100: #D1DFEA;
--slate-200: #9FBAD1;
--slate-300: #6E93B8;
--slate-400: #4B7DA2;
--slate-500: #3A6B8C;
--slate-600: #2F5874;
--slate-700: #24445A;
--slate-800: #172B38;
--slate-900: #0C161C;
/* Cream — PAGE */
--cream-50: #FBF9F4;
--cream-100: #F2F0E8;
--cream-200: #ECE6D4;
--cream-300: #E0D7BD;
--cream-400: #CFC4A2;
/* Ink — TEXT */
--ink-900: #0A1810;
--ink-800: #132519;
--ink-700: #1D3425;
--ink-600: #2D4738;
--ink-500: #4A6656;
--ink-400: #6E8574;
--ink-mute: #4A6656;
--ink-deep: #081109;
/* Utility */
--paper: #FFFFFF;
--rule: #E5DFD2;
--rule-soft: #EDE7DA;
/* Status */
--green: #2F7D5C;
--green-soft: #E0F0E8;
--amber: #C48B1A;
--amber-soft: #FBF2D5;
--red: #B32B1E;
--red-soft: #F6D4CF;
/* ═════ SEMANTIC ALIASES ═══════════════════════════════════════════ */
--evergreen: var(--evergreen-800);
--gold: var(--gold-500);
--brick: var(--brick-500);
--brick-deep: var(--brick-700);
--slate: var(--slate-500);
--cream: var(--cream-100);
--cream-deep: var(--cream-200);
--ink: var(--ink-900);
--ink-soft: var(--ink-700);
--bg-page: var(--cream);
--bg-paper: var(--paper);
--bg-deep: var(--evergreen-800);
--bg-alt: var(--cream-deep);
--fg-primary: var(--ink);
--fg-secondary: var(--ink-mute);
--fg-on-dark: var(--cream);
--fg-link: var(--slate);
--fg-accent: var(--gold);
--fg-cta: var(--brick);
/* ═════ TYPOGRAPHY (v2 — readability-first) ═══════════════════════
Display: Source Serif 4 — upright, open apertures, no italic used
Body: IBM Plex Sans — exceptional legibility at 14–18px
Mono: IBM Plex Mono — matched family, for meta/code only
Emphasis: COLOR, NOT ITALIC. Brick for payoff, Gold for premium.
──────────────────────────────────────────────────────────────────── */
--type-display: 'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
--type-body: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--type-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* Fluid type ramp — bumped min sizes for 57yo audience */
--t-display-xl: clamp(2.8rem, 6.4vw, 5.6rem); /* H1 hero */
--t-display-lg: clamp(2.1rem, 4.4vw, 3.5rem); /* H2 */
--t-display-md: clamp(1.6rem, 2.8vw, 2.2rem); /* big stats */
--t-h3: clamp(1.35rem, 2.2vw, 1.75rem);
--t-h4: 1.15rem;
--t-body-lg: 1.22rem; /* hero sub, emphasized body */
--t-body: 1.0rem; /* base = 18px */
--t-body-sm: 0.889rem; /* = 16px @ 18px base */
--t-meta: 0.833rem; /* = 15px */
--t-mono: 0.833rem; /* = 15px — up from 0.78rem */
--t-mono-xs: 0.778rem; /* = 14px — the floor */
--lh-display: 1.1; /* Source Serif needs a touch more headroom */
--lh-body: 1.6;
--lh-tight: 1.4;
/* Letter-spacing — Source Serif works best near optical zero */
--ls-display: -0.020em;
--ls-h2: -0.018em;
--ls-h3: -0.010em;
--ls-body: 0;
--ls-mono-eyebrow: 0.14em; /* slightly tighter, Plex Mono is already wider */
--ls-mono-label: 0.08em;
/* Weights — Source Serif reads best at 400 display / 500 mid / 600 assertive */
--fw-display-regular: 400;
--fw-display-medium: 500;
--fw-body-regular: 400;
--fw-body-medium: 500;
--fw-body-bold: 600; /* emphasis without italic */
/* ═════ SPACING ═════════════════════════════════════════════════════ */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-7: 32px;
--sp-8: 40px;
--sp-9: 56px;
--sp-10: 72px;
--sp-11: 96px;
--sp-12: 128px;
/* ═════ RADII ═══════════════════════════════════════════════════════ */
--r-sm: 6px;
--r: 10px;
--r-lg: 18px;
--r-xl: 28px;
--r-pill: 100px;
/* ═════ SHADOW ══════════════════════════════════════════════════════ */
--shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.06);
--shadow: 0 6px 24px rgba(15, 27, 45, 0.08);
--shadow-lg: 0 24px 60px rgba(15, 27, 45, 0.14);
--shadow-brick: 0 14px 40px rgba(168, 52, 42, 0.28);
/* ═════ MOTION ══════════════════════════════════════════════════════ */
--ease-out: cubic-bezier(.2, .8, .2, 1);
--d-hover: 150ms;
--d-transition: 250ms;
--d-reveal: 700ms;
/* Layout */
--container-max: 1240px;
--container-pad: 28px;
}
/* ═════ BASE ELEMENT STYLES ════════════════════════════════════════ */
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
font-size: 18px; /* ★ 18px base — accessible for 57yo users */
}
body {
font-family: var(--type-body);
font-size: 1rem;
line-height: var(--lh-body);
color: var(--fg-primary);
background: var(--bg-page);
font-weight: var(--fw-body-regular);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
font-family: var(--type-display);
color: var(--ink);
font-weight: var(--fw-display-regular);
letter-spacing: var(--ls-h2);
line-height: var(--lh-display);
}
h1 {
font-size: var(--t-display-xl);
letter-spacing: var(--ls-display);
}
/* EMPHASIS = COLOR, not italic. Payoff word wrapped in stays upright. */
h1 em, h2 em, h3 em {
font-style: normal;
font-weight: inherit;
color: var(--brick);
}
h1 em.gold, h2 em.gold, h3 em.gold { color: var(--gold); }
h2 { font-size: var(--t-display-lg); }
h3 {
font-size: var(--t-h3);
font-weight: var(--fw-display-medium);
letter-spacing: var(--ls-h3);
}
h4 {
font-size: var(--t-h4);
font-weight: var(--fw-body-bold);
font-family: var(--type-body);
letter-spacing: 0;
}
p {
color: var(--fg-secondary);
max-width: 62ch;
}
a {
color: var(--fg-link);
text-decoration: none;
text-underline-offset: 3px;
}
a:hover { color: var(--brick); text-decoration: underline; }
code, kbd, samp {
font-family: var(--type-mono);
font-size: 0.92em;
background: var(--cream-deep);
padding: 2px 6px;
border-radius: var(--r-sm);
color: var(--ink);
}
/* ═════ UTILITY CLASSES ══════════════════════════════════════════ */
.eyebrow {
font-family: var(--type-mono);
font-size: var(--t-mono);
font-weight: 500;
color: var(--brick);
text-transform: uppercase;
letter-spacing: var(--ls-mono-eyebrow);
margin-bottom: 20px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.eyebrow::before {
content: '';
width: 24px;
height: 1px;
background: var(--brick);
display: inline-block;
}
.btn {
padding: 16px 32px;
border-radius: var(--r-pill);
font-family: var(--type-body);
font-weight: 500;
font-size: 1rem;
border: 1px solid transparent;
cursor: pointer;
transition: all var(--d-transition) var(--ease-out);
display: inline-flex;
align-items: center;
gap: 8px;
letter-spacing: -0.005em;
}
.btn-primary {
background: var(--brick);
color: var(--cream);
}
.btn-primary:hover {
background: var(--brick-deep);
transform: translateY(-2px);
box-shadow: var(--shadow-brick);
}
.btn-ghost {
background: transparent;
color: var(--ink);
border-color: var(--ink);
}
.btn-ghost:hover {
background: var(--ink);
color: var(--cream);
}
/* 3·2·1 numeric mark — upright Source Serif in Gold */
.mark-321 {
font-family: var(--type-display);
font-weight: 400;
color: var(--gold);
letter-spacing: -0.02em;
}
.mono-tag {
font-family: var(--type-mono);
font-size: var(--t-mono-xs);
text-transform: uppercase;
letter-spacing: var(--ls-mono-label);
padding: 4px 10px;
border-radius: var(--r-sm);
font-weight: 500;
}
.trust-pill {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 5px 16px 5px 6px;
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--r-pill);
font-size: 0.889rem;
color: var(--ink-soft);
box-shadow: var(--shadow-sm);
}
.container {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--container-pad);
}
/* ═════ LEGACY NAME SHIM ════════════════════════════════════════════
Maps the prior marketing-site token names to handoff primitives so
page-specific selectors (nav, hero, fires, modules, etc.) keep
working without a full rewrite. Source of truth remains the
handoff tokens above.
─────────────────────────────────────────────────────────────────── */
:root {
/* Color primitive aliases (old name → handoff ramp) */
--color-evergreen-50: var(--evergreen-50);
--color-evergreen-100: var(--evergreen-100);
--color-evergreen-200: var(--evergreen-200);
--color-evergreen-300: var(--evergreen-300);
--color-evergreen-400: var(--evergreen-400);
--color-evergreen-500: var(--evergreen-500);
--color-evergreen-600: var(--evergreen-600);
--color-evergreen-700: var(--evergreen-700);
--color-evergreen-800: var(--evergreen-800);
--color-evergreen-900: var(--evergreen-900);
--color-evergreen-950: var(--evergreen-950);
--color-gold-50: var(--gold-50);
--color-gold-100: var(--gold-100);
--color-gold-200: var(--gold-200);
--color-gold-300: var(--gold-300);
--color-gold-400: var(--gold-400);
--color-gold-500: var(--gold-500);
--color-gold-600: var(--gold-600);
--color-gold-700: var(--gold-700);
--color-gold-800: var(--gold-800);
--color-gold-900: var(--gold-900);
--color-slate-50: var(--slate-50);
--color-slate-100: var(--slate-100);
--color-slate-200: var(--slate-200);
--color-slate-300: var(--slate-300);
--color-slate-400: var(--slate-400);
--color-slate-500: var(--slate-500);
--color-slate-600: var(--slate-600);
--color-slate-700: var(--slate-700);
--color-slate-800: var(--slate-800);
--color-slate-900: var(--slate-900);
--color-brick-50: var(--brick-50);
--color-brick-100: var(--brick-100);
--color-brick-200: var(--brick-200);
--color-brick-300: var(--brick-300);
--color-brick-400: var(--brick-400);
--color-brick-500: var(--brick-500);
--color-brick-600: var(--brick-600);
--color-brick-700: var(--brick-700);
--color-brick-800: var(--brick-800);
--color-brick-900: var(--brick-900);
--color-cream-50: var(--cream-50);
--color-cream-100: var(--cream-100);
--color-cream-200: var(--cream-200);
--color-cream-300: var(--cream-300);
--color-cream-400: var(--cream-400);
--color-cream-500: var(--cream-400);
--color-cream-600: var(--ink-500);
--color-ink-50: #F7F7F6;
--color-ink-100: #E8E8E6;
--color-ink-200: #C9C9C4;
--color-ink-300: var(--ink-400);
--color-ink-400: var(--ink-500);
--color-ink-500: var(--ink-600);
--color-ink-600: var(--ink-700);
--color-ink-700: var(--ink-800);
--color-ink-800: var(--ink-900);
--color-ink-900: var(--ink-900);
--color-ink-950: var(--ink-deep);
--color-neutral-50: #FAFAF9;
--color-neutral-100: #F4F4F2;
--color-neutral-200: #E7E7E3;
--color-neutral-300: var(--rule);
--color-neutral-400: var(--ink-400);
--color-neutral-500: var(--ink-500);
/* Semantic aliases */
--color-brand-primary: var(--evergreen-800);
--color-brand-primary-hover: var(--evergreen-900);
--color-brand-primary-subtle: var(--evergreen-50);
--color-brand-primary-muted: var(--evergreen-600);
--color-brand-accent: var(--gold-500);
--color-brand-accent-hover: var(--gold-600);
--color-brand-accent-subtle: var(--gold-50);
--color-brand-cta: var(--brick-500);
--color-brand-cta-hover: var(--brick-600);
--color-brand-cta-subtle: var(--brick-50);
--color-brand-trust: var(--slate-500);
--color-brand-trust-hover: var(--slate-600);
--color-surface-page: var(--cream);
--color-surface-elevated: var(--paper);
--color-surface-subtle: var(--cream-50);
--color-surface-sunken: var(--cream-200);
--color-surface-inverse: var(--evergreen-900);
--color-surface-inverse-subtle: var(--evergreen-800);
--color-text-primary: var(--ink-900);
--color-text-secondary: var(--ink-500);
--color-text-tertiary: var(--ink-400);
--color-text-brand: var(--evergreen-800);
--color-text-accent: var(--gold-700);
--color-text-cta: var(--brick-600);
--color-text-trust: var(--slate-600);
--color-text-on-inverse: var(--cream);
--color-text-on-inverse-muted: var(--evergreen-200);
--color-text-on-brand: var(--cream);
--color-text-on-cta: var(--cream-50);
--color-border-subtle: var(--rule);
--color-border-default: var(--rule);
--color-border-strong: var(--ink-400);
--color-border-focus: var(--evergreen-600);
/* Typography aliases — these override to handoff stacks */
--font-display: var(--type-display);
--font-body: var(--type-body);
--font-mono: var(--type-mono);
/* Font size aliases — bridged to handoff fluid ramp where sensible */
--font-size-xs: var(--t-mono-xs);
--font-size-sm: var(--t-body-sm);
--font-size-base: var(--t-body);
--font-size-lg: var(--t-body-lg);
--font-size-xl: var(--t-h4);
--font-size-2xl: var(--t-h3);
--font-size-3xl: var(--t-display-md);
--font-size-4xl: var(--t-display-lg);
--font-size-5xl: var(--t-display-xl);
--font-size-display: var(--t-display-xl);
/* Space aliases */
--space-1: var(--sp-1);
--space-2: var(--sp-2);
--space-3: var(--sp-3);
--space-4: var(--sp-4);
--space-5: var(--sp-5);
--space-6: var(--sp-6);
--space-8: var(--sp-7);
--space-10: var(--sp-8);
--space-12: 48px;
--space-16: 64px;
--space-20: var(--sp-10);
--space-24: var(--sp-11);
--space-32: var(--sp-12);
/* Radius aliases */
--radius-sm: var(--r-sm);
--radius-md: var(--r);
--radius-lg: var(--r-lg);
--radius-xl: var(--r-xl);
--radius-2xl: var(--r-xl);
--radius-pill: var(--r-pill);
/* Shadow aliases */
--shadow-brand: var(--shadow);
--shadow-cta: var(--shadow-brick);
/* Motion aliases */
--duration-fast: var(--d-hover);
--duration-base: var(--d-transition);
--duration-slow: var(--d-reveal);
--duration-countdown: 1000ms;
--easing-standard: var(--ease-out);
--easing-snap: cubic-bezier(0.6, 0, 0.2, 1);
/* Layout alias */
--container-xl: var(--container-max);
}