/* ═══════════════════════════════════════════════════════════════ MHDSRIP — Design Tokens The single source of truth. Every view reads from here. Philosophy: editorial-organic. Memorial as digital heirloom. ═══════════════════════════════════════════════════════════════ */ :root { /* ── PALETTE ───────────────────────────────────────────────── */ /* Sand — the paper. Warm, bone-white, calm */ --sand-0: #fdfcf8; --sand-5: #fbfaf4; --sand-10: #f5f1e7; --sand-20: #ebe5d1; --sand-30: #ddd4b6; --sand-40: #c5ba99; /* Ink — the script. Near-black navy for text */ --ink-100: #050a15; --ink-90: #0b1a2f; --ink-80: #162334; --ink-60: #2d3b4e; --ink-40: #5a6879; --ink-30: #7a8696; --ink-20: #a9b2bf; --ink-10: #cfd5de; /* Blue — the brand. Deepened, calibrated */ --blue-100: #051a3a; --blue-90: #0c2f66; --blue-70: #154694; --blue-50: #1e5fa8; --blue-40: #2c7bc4; --blue-30: #4cc3f1; --blue-20: #a8d8f6; --blue-10: #dceefa; --blue-5: #edf5fb; /* Accents — used sparingly */ --gold-50: #c89a3a; /* quiet highlights, year numbers */ --gold-10: #f5ecd3; --heart: #d94a5c; /* reserved for likes/hearts only */ --heart-10: #fae6e9; --candle: #ffa63d; /* reserved for candle flames */ --warn-50: #b0573a; --warn-10: #f5e6dd; /* ── SEMANTIC ALIASES ──────────────────────────────────────── */ --bg: var(--sand-5); --bg-soft: var(--sand-10); --bg-paper: var(--sand-0); --ink: var(--ink-90); --ink-soft: var(--ink-60); --ink-muted: var(--ink-40); --ink-quiet: var(--ink-30); --accent: var(--blue-50); --accent-deep: var(--blue-70); --accent-darker: var(--blue-90); --accent-light: var(--blue-30); --accent-soft: var(--blue-10); --accent-wash: var(--blue-5); --line: var(--sand-20); --line-strong: var(--sand-30); --line-hair: color-mix(in srgb, var(--ink-90) 8%, transparent); --card: var(--bg-paper); --card-elevated: var(--sand-0); --warn: var(--warn-50); --warn-soft: var(--warn-10); /* ── TYPOGRAPHY ────────────────────────────────────────────── */ --font-display: 'Fraunces', 'Iowan Old Style', 'Apple Garamond', Georgia, serif; --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Fluid type scale — mobile first, scales to desktop */ --t-display-1: clamp(2.5rem, 6vw + 1rem, 4.5rem); /* 40 → 72 */ --t-display-2: clamp(2rem, 4.5vw + 1rem, 3.5rem); /* 32 → 56 */ --t-h1: clamp(1.75rem, 3.5vw + 0.75rem, 2.75rem);/* 28 → 44 */ --t-h2: clamp(1.375rem, 2.5vw + 0.5rem, 2rem); /* 22 → 32 */ --t-h3: clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem); /* 18 → 24 */ --t-lead: 1.25rem; /* 20 */ --t-body-lg: 1.0625rem; /* 17 */ --t-body: 1rem; /* 16 */ --t-sm: 0.875rem; /* 14 */ --t-xs: 0.75rem; /* 12 */ --t-eyebrow: 0.6875rem; /* 11 — uppercase only */ /* Line heights */ --lh-display: 1.05; --lh-heading: 1.15; --lh-body: 1.6; --lh-tight: 1.4; /* Tracking */ --track-tighter: -0.03em; --track-tight: -0.015em; --track-normal: 0; --track-loose: 0.02em; --track-eyebrow: 0.14em; /* Weights */ --fw-display: 450; --fw-heading: 500; --fw-body: 400; --fw-strong: 600; --fw-bold: 700; /* ── SPACING (8pt) ─────────────────────────────────────────── */ --s-0: 0; --s-px: 1px; --s-0-5: 2px; --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 192px; /* ── RADII ─────────────────────────────────────────────────── */ --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 26px; --r-2xl: 40px; --r-pill: 999px; --r-circle: 50%; /* ── ELEVATION ─────────────────────────────────────────────── */ /* Warm shadows — tinted with ink-90, never pure black */ --shadow-xs: 0 1px 2px color-mix(in srgb, var(--ink-100) 6%, transparent); --shadow-sm: 0 1px 2px color-mix(in srgb, var(--ink-100) 5%, transparent), 0 2px 6px color-mix(in srgb, var(--ink-100) 5%, transparent); --shadow-md: 0 2px 4px color-mix(in srgb, var(--ink-100) 5%, transparent), 0 10px 24px color-mix(in srgb, var(--ink-100) 8%, transparent); --shadow-lg: 0 4px 12px color-mix(in srgb, var(--ink-100) 7%, transparent), 0 24px 48px color-mix(in srgb, var(--ink-100) 14%, transparent); --shadow-xl: 0 8px 20px color-mix(in srgb, var(--ink-100) 10%, transparent), 0 40px 80px color-mix(in srgb, var(--ink-100) 20%, transparent); /* Focus ring */ --ring: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); --ring-warn: 0 0 0 4px color-mix(in srgb, var(--warn) 22%, transparent); /* ── MOTION ────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.5, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-gentle: cubic-bezier(0.45, 0, 0.2, 1); --dur-instant: 100ms; --dur-fast: 180ms; --dur-base: 240ms; --dur-slow: 420ms; --dur-entry: 640ms; /* ── LAYOUT ────────────────────────────────────────────────── */ --container-sm: 640px; --container-md: 840px; --container-lg: 1120px; --container-xl: 1320px; --gutter: clamp(1rem, 4vw, 2rem); --section-space: clamp(3rem, 8vw, 6rem); } /* ── LEGACY ALIASES (for inline styles during Phase B migration) ─── */ :root { --radius: var(--r-lg); --radius-sm: var(--r-md); --radius-xs: var(--r-sm); --accent-dark: var(--accent-deep); --bg-warm: var(--sand-10); --tint-dawn: var(--blue-10); --tint-still: var(--blue-20); --tint-focus: var(--accent-wash); --tint-garden: var(--accent-soft); --tint-branch: var(--blue-10); --tint-bloom: var(--gold-10); --tint-warm: var(--gold-10); --shadow: var(--shadow-md); } /* Reduced motion — honour the system pref */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-entry: 0ms; } }