/* ============================================================
Macrovore Design System — Colors & Type
------------------------------------------------------------
Source of truth for all brand design tokens.
Adapted from the Claude Design bundle at:
/brand/guidelines/design_system/v0.1/macrovore-design-system/
Fonts (Arboria + Arbotek) are loaded via
in index.html — no @import here to avoid double-loading.
Spark color: Oxblood `#7A2E2E` (Brick Warm), per palette v02
(2026-05-03). Replaces deprecated terracotta `#C4896A`.
============================================================ */
:root {
/* ── Color tokens ────────────────────────────────────────── */
--mv-black: #1A1A1A; /* Primary anchor — headlines, wordmark, dominant text */
--mv-purple: #9A819D; /* Hero brand color — tagline, accents, cereal identity */
--mv-sage: #8A9E8C; /* Plant-based signal — secondary accent, check marks */
--mv-oxblood: #7A2E2E; /* Spark — max ~2 placements per composition. Not the annotation color. */
--mv-warm-gray: #A09890; /* Neutral utility — dividers, borders, muted text ON DARK only */
--mv-warm-gray-ink:#585049; /* Secondary TEXT on light bg — warm gray darkened to clear WCAG AA (5.0:1 on cream). #A09890 fails at ~2:1. */
--mv-cream: #E3D5BA; /* Background — warm tan */
--mv-cream-light: #F5F0E8; /* Brand Cream (palette v02) — lighter alt to the tan */
--mv-white: #FFFFFF; /* Alt bg band — social proof, FAQ sections */
/* Extended tones — derived from the live dev site (index.html). */
--mv-purple-hover:#7A6280; /* Purple button hover */
--mv-purple-ink: #5A4957; /* Stat-band label color */
--mv-purple-dim: #2A2226; /* Stat-band numeral */
--mv-cream-hair: #E8E2D8; /* Cream divider hairline */
--mv-form-border: #D1D5DB; /* Form input border, pre-focus */
--mv-footnote: #585049; /* Footnote text — darkened from #6B5F58 (4.26:1, under AA) to clear 4.5:1 on cream */
--mv-brick-muted: #A44236; /* Brick red — "miss"/inferior indicator (comparison table). Warm brick red, distinct from black; still not the reserved oxblood spark. */
--mv-sage-deep: #4E6A52; /* Deeper sage — comparison-table check marks (more pop than base sage, esp. on the tinted MV column). */
/* ── Semantic aliases ────────────────────────────────────── */
--mv-bg: var(--mv-cream);
--mv-bg-alt: var(--mv-white);
--mv-bg-inverse: var(--mv-black);
--mv-fg: var(--mv-black); /* primary text */
--mv-fg-2: var(--mv-warm-gray-ink); /* secondary text on light bg (AA-safe) */
--mv-fg-3: var(--mv-purple-ink); /* tertiary / label ink */
--mv-fg-on-dark: var(--mv-cream);
--mv-fg-muted-dark: var(--mv-warm-gray);
--mv-accent: var(--mv-purple);
--mv-accent-hover: var(--mv-purple-hover);
--mv-accent-soft: var(--mv-sage);
--mv-accent-pop: var(--mv-oxblood); /* spark — max ~2 placements per composition */
--mv-link-on-light: var(--mv-purple-ink); /* #5A4957 — links on cream/white (~5:1 AA). Base --mv-purple fails at ~2.4:1 on light. */
--mv-border: var(--mv-warm-gray); /* dividers, faq lines */
--mv-border-form: var(--mv-form-border);
/* ── Type ────────────────────────────────────────────────── */
--mv-font-wordmark: 'arbotek', 'Arial Black', system-ui, sans-serif;
--mv-font-body: 'arboria', 'Futura', 'Avenir Next', system-ui, sans-serif;
--mv-font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
--mv-font-annotation: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive; /* placeholder; final brand-correct font TBD */
/* Weights */
--mv-w-regular: 400;
--mv-w-medium: 500;
--mv-w-semi: 600;
--mv-w-bold: 700;
--mv-w-extra: 800;
--mv-w-black: 900;
/* Type scale (px) — tuned to the live site's clamp() targets at 1200w */
--mv-fs-display: 112px;
--mv-fs-h1: 48px;
--mv-fs-h2: 32px;
--mv-fs-h3: 24px;
--mv-fs-body-lg: 19px;
--mv-fs-body: 16px;
--mv-fs-body-sm: 14px;
--mv-fs-caption: 12px;
--mv-fs-eyebrow: 11px;
/* Letter-spacing */
--mv-ls-tight: -0.02em;
--mv-ls-normal: 0;
--mv-ls-eyebrow: 0.08em;
--mv-ls-track: 0.12em;
--mv-ls-heavy: 0.2em;
/* Line heights */
--mv-lh-tight: 1.1;
--mv-lh-snug: 1.3;
--mv-lh-normal: 1.5;
--mv-lh-relaxed: 1.6;
/* ── Spacing (4px base) ──────────────────────────────────── */
--mv-s-1: 4px;
--mv-s-2: 8px;
--mv-s-3: 12px;
--mv-s-4: 16px;
--mv-s-5: 20px;
--mv-s-6: 24px;
--mv-s-8: 32px;
--mv-s-10: 40px;
--mv-s-12: 48px;
--mv-s-16: 64px;
--mv-s-20: 80px;
/* ── Radii ──────────────────────────────────────────────── */
--mv-r-xs: 4px;
--mv-r-sm: 6px; /* form inputs, primary buttons */
--mv-r-md: 8px; /* cards, cookie modal content */
--mv-r-lg: 12px; /* elevated modals, hero swatch cards */
--mv-r-pill: 100px; /* segment pills */
/* ── Shadows ────────────────────────────────────────────── */
--mv-shadow-1: 0 1px 3px rgba(0,0,0,0.06);
--mv-shadow-2: 0 2px 8px rgba(0,0,0,0.08);
--mv-shadow-3: 0 8px 24px rgba(0,0,0,0.12);
--mv-shadow-footer: 0 -4px 20px rgba(0,0,0,0.2);
--mv-shadow-puff: 0 10px 10px rgba(40,25,5,0.6);
--mv-text-emboss:
0 0.024em 0 rgba(255,255,255,0.5),
0 -0.024em 0 rgba(0,0,0,0.08),
0 0.048em 0.024em rgba(0,0,0,0.10),
0 0.071em 0.071em rgba(0,0,0,0.09),
0 0.119em 0.143em rgba(0,0,0,0.07),
0 0.190em 0.286em rgba(0,0,0,0.05),
0 0 0.190em rgba(238,232,222,0.6);
/* ── Motion ─────────────────────────────────────────────── */
--mv-dur-fast: 0.2s;
--mv-dur-med: 0.4s;
--mv-dur-long: 0.9s;
--mv-ease-std: ease;
--mv-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ============================================================
Annotation primitive — `.mv-annotation`
------------------------------------------------------------
Hand-written marginalia anchored to elements, per v3 brief.
Color is locked to off-black via `var(--mv-fg)`. NEVER use
--mv-accent-pop (oxblood) for annotation text — the off-black
reads more credibly as a real scientist's-notebook mark.
Sizing uses clamp() to honor the v3 spec: ~16-18px desktop,
≥14px mobile.
This class handles typography only. Per-instance positioning,
anchor offsets, and arrow SVGs live in section-specific CSS
so each annotation can curve toward its anchor independently.
Usage:
PDCAAS = 1, same as eggs
============================================================ */
.mv-annotation {
font-family: var(--mv-font-annotation);
font-style: normal;
font-weight: var(--mv-w-medium);
font-size: clamp(14px, 0.5vw + 13px, 18px);
line-height: var(--mv-lh-snug);
color: var(--mv-fg);
letter-spacing: var(--mv-ls-normal);
}
/* Optional positioning context — apply to a parent that hosts
marginal annotations. Annotations themselves position absolutely
inside this container in section-specific CSS. */
.mv-annotation-host {
position: relative;
}
/* Annotation arrow line — base class for inline SVG arrows that
point from an annotation to the element it annotates.
Per-instance arrow paths and positioning live in section CSS. */
.mv-annotation__arrow {
display: block;
stroke: var(--mv-fg);
stroke-width: 1.25;
stroke-linecap: round;
fill: none;
pointer-events: none;
}
/* ============================================================
Left-justified supertitle section — `.mv-supertitle-section`
------------------------------------------------------------
Section title sits left-aligned in the leftmost column at
large display size. Content occupies the right two-thirds.
Used by Section B (How It Stacks Up) and Section D (FAQ),
per v3 brief Reference B.
Mobile (≤720px): collapses to single column, title scales down.
Usage:
============================================================ */
.mv-supertitle-section {
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--mv-s-12);
align-items: start;
}
.mv-supertitle-section__title {
font-family: var(--mv-font-body);
font-weight: var(--mv-w-semi);
font-size: var(--mv-fs-h1);
line-height: var(--mv-lh-tight);
letter-spacing: var(--mv-ls-tight);
color: var(--mv-fg);
margin: 0;
}
.mv-supertitle-section__content {
min-width: 0; /* allow grid item to shrink below its content's intrinsic width */
}
@media (max-width: 720px) {
.mv-supertitle-section {
grid-template-columns: 1fr;
gap: var(--mv-s-6);
}
.mv-supertitle-section__title {
font-size: var(--mv-fs-h2);
}
}