/* ═══════════════════════════════════════════════════════════
MPD · Design Tokens
Michael Parks Design — client portal.
"Quiet systems": warm cream ground, ink text, terracotta accent.
Single :root block — no resets, no chrome, no JS.
LINEAGE
Structurally descended from the VMG portal token contract, but
re-authored: (1) values inverted dark→light, (2) VMG brand-color
variable names (--obsidian, --hex-violet, --sapphire, --royal,
--grad-*) renamed to neutral semantic roles so the codebase reads
as MPD's own. The --ink-* ramp, --space-*, --f-*, motion, radius,
and status names are already role-based and were kept.
USAGE
then reference tokens: color: var(--ink-100); background: var(--surface);
NOTES
• Palette is HEX first, OKLCH second on purpose. Legacy browsers
stop at the hex; modern browsers (last valid wins) get the wider-
gamut OKLCH. Preserve this dual-declaration if you extend.
• Light system: color-scheme is light, native controls inherit the
terracotta accent. The --ink-* ramp is DARK ink on cream (the
inverse of VMG's light-on-dark ramp).
═══════════════════════════════════════════════════════════ */
:root {
/* ─────────────────────────────────────────────────────────
COLOR · surfaces (the cream ladder)
--surface is the default page ground; -2 / -3 step warmer/
deeper for raised panels and insets.
───────────────────────────────────────────────────────── */
--surface: #F5EFE3; /* cream (was --obsidian) */
--surface: oklch(94.5% 0.018 83);
--surface-2: #EBE3D2; /* cream-deep (was --midnight) */
--surface-2: oklch(91% 0.024 84);
--surface-3: #E0D3BC; /* warm sand (was --royal) */
--surface-3: oklch(86.5% 0.033 83);
/* COLOR · accents
--accent (terracotta) is the single brand accent: links,
eyebrows, emphasis, active states, hairline card rules.
--accent-cool (sage) and --accent-warm (ochre) are supporting
hues for status, charts, and secondary highlights.
───────────────────────────────────────────────────────── */
--accent: #C25A3C; /* terracotta (was --hex-violet) */
--accent: oklch(58.5% 0.132 39);
--accent-soft: #D97A5E; /* terracotta-soft (was --hex-violet-light) */
--accent-soft: oklch(68% 0.115 39);
--accent-cool: #7C8A6A; /* sage (was --sapphire) */
--accent-cool: oklch(60% 0.045 128);
--accent-warm: #D4A24A; /* ochre (new — supporting) */
--accent-warm: oklch(74.5% 0.115 78);
/* COLOR · ink ramp (foreground on cream)
Warm-dark, alpha-stepped. --ink-100 solid neutral for primary
text; mid steps carry a warm tint for secondary/muted text and
hairline borders/fills.
───────────────────────────────────────────────────────── */
--ink-100: #1F1F1F; /* primary text */
--ink-100: oklch(23% 0 0);
--ink-70: rgba(61, 53, 42, 0.86); /* secondary text — brand --ink-soft #3D352A */
--ink-70: oklch(33.4% 0.022 76 / 0.86);
--ink-50: rgba(61, 53, 42, 0.60); /* muted / meta */
--ink-50: oklch(33.4% 0.022 76 / 0.60);
--ink-30: rgba(61, 53, 42, 0.34); /* faint / placeholder */
--ink-30: oklch(33.4% 0.022 76 / 0.34);
--ink-15: rgba(61, 53, 42, 0.16); /* borders */
--ink-15: oklch(33.4% 0.022 76 / 0.16);
--ink-08: rgba(61, 53, 42, 0.08); /* subtle fills */
--ink-08: oklch(33.4% 0.022 76 / 0.08);
/* COLOR · semantic */
--alert-red: #C4362F; /* deepened for AA text on cream */
--alert-red: oklch(52% 0.176 27);
--border-color: var(--ink-15);
/* ─────────────────────────────────────────────────────────
GRADIENTS · quiet warm washes
MPD ethos is "texture, not stock" — no cosmic washes. These
stay within the cream ladder; --grad-accent is the one warm
terracotta→ochre pull for a deliberate accent moment.
───────────────────────────────────────────────────────── */
--grad-hero: linear-gradient(135deg, #F5EFE3 0%, #EBE3D2 60%, #E0D3BC 100%); /* was --grad-cosmos */
--grad-focal: radial-gradient(circle at 30% 30%, #EBE3D2 0%, #F5EFE3 70%); /* was --grad-eclipse */
--grad-band: linear-gradient(180deg, #F5EFE3 0%, #EBE3D2 100%); /* was --grad-aurora */
--grad-accent: linear-gradient(135deg, #C25A3C 0%, #D4A24A 100%); /* was --grad-violet */
--grad-surface: linear-gradient(180deg, #EBE3D2 0%, #E0D3BC 100%); /* was --grad-midnight*/
/* ─────────────────────────────────────────────────────────
TYPOGRAPHY · font families
--font-display: Bricolage Grotesque — headings, display.
--font-body: Manrope — body copy, UI text.
--font-mono: JetBrains Mono — eyebrows, labels, nav, badges
(UPPERCASE, 0.12–0.18em tracking).
───────────────────────────────────────────────────────── */
--font-display: 'Bricolage Grotesque', system-ui, sans-serif;
--font-body: 'Manrope', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, monospace;
/* TYPOGRAPHY · type scale (clamp-based, fluid) — role names kept */
--f-display-xl: clamp(3rem, 8vw, 7.5rem); /* hero display */
--f-display-l: clamp(2.25rem, 5.5vw, 4rem); /* section titles */
--f-h1: clamp(1.75rem, 4vw, 2.75rem);
--f-h2: clamp(1.375rem, 2.75vw, 1.875rem);
--f-h3: 1.25rem;
--f-body: 1rem;
--f-small: 0.875rem;
--f-micro: 0.75rem; /* eyebrows, mono labels */
/* ─────────────────────────────────────────────────────────
SPACING · t-shirt scale (kept from the contract)
───────────────────────────────────────────────────────── */
--space-3xs: 0.25rem;
--space-2xs: 0.5rem;
--space-xs: 0.75rem;
--space-s: 1rem;
--space-m: 1.5rem;
--space-l: 2rem;
--space-xl: 3rem;
--space-2xl: 4.5rem;
--space-3xl: 7rem;
/* LAYOUT */
--section-max: 1180px; /* brand --content-width */
/* MOTION · easings + duration scale (kept) */
--ease-out-luxe: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-in-out-luxe: cubic-bezier(0.65, 0, 0.35, 1);
--dur-quick: 200ms;
--dur-base: 400ms;
--dur-slow: 700ms;
--dur-luxe: 1200ms;
/* ─────────────────────────────────────────────────────────
UI HINTS · light, terracotta-accented UI. Native form
controls, scrollbars, autofill pick this up.
───────────────────────────────────────────────────────── */
color-scheme: light;
accent-color: var(--accent);
}