/* ───────────────────────────────────────────────────────────── The Mind-Body Doc — Colors & Type Source of truth: brand guide approved by Dr. Sean Woodland ───────────────────────────────────────────────────────────── */ @import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;600;700;800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap"); :root { /* ── Brand palette ─────────────────────────────────────────── */ --mbd-charcoal: #1a1a1a; /* Primary text & dark backgrounds */ --mbd-warm-ivory: #f5f0e8; /* Page background, soft surfaces */ --mbd-sage-teal: #4a7c6f; /* Primary accent — CTAs & links */ --mbd-mist: #a8c5bd; /* Soft accent — backgrounds */ --mbd-warm-amber: #c4956a; /* Coaching / premium accent */ --mbd-dark-ochre: #8b7355; /* Deep accent, secondary CTA */ --mbd-linen: #e8e0d4; /* Cards, dividers, subtle bg */ /* Tints / shades derived from the seven-color core */ --mbd-charcoal-90: #2b2b2b; --mbd-charcoal-70: #4d4d4d; --mbd-charcoal-50: #7a7a7a; --mbd-sage-teal-dark: #355a51; --mbd-sage-teal-tint: #cfddd9; --mbd-warm-amber-tint: #ead7c2; --mbd-ivory-deep: #ece5d8; --mbd-white: #ffffff; /* Status — derived to stay on-brand */ --mbd-success: #4a7c6f; /* sage teal */ --mbd-warning: #c4956a; /* warm amber */ --mbd-danger: #a14a3c; /* terracotta — adjacent to amber/ochre */ --mbd-info: #355a51; /* deep sage */ /* ── Semantic tokens ───────────────────────────────────────── */ --bg: var(--mbd-warm-ivory); --bg-card: var(--mbd-white); --bg-subtle: var(--mbd-linen); --bg-dark: var(--mbd-charcoal); --fg: var(--mbd-charcoal); --fg-muted: var(--mbd-charcoal-70); --fg-subtle: var(--mbd-charcoal-50); --fg-on-dark:var(--mbd-warm-ivory); --accent: var(--mbd-sage-teal); --accent-hover: var(--mbd-sage-teal-dark); --accent-soft: var(--mbd-mist); --accent-warm: var(--mbd-warm-amber); --border: rgba(26, 26, 26, 0.12); --border-strong: rgba(26, 26, 26, 0.24); --divider: var(--mbd-linen); /* ── Typography ────────────────────────────────────────────── */ /* Garet is a paid TypeMates/TypeForward font. DM Sans is the */ /* nearest free Google Fonts match (geometric sans, high */ /* x-height). Swap when license is acquired. */ --font-display: "League Spartan", "Arial Narrow", sans-serif; --font-body: "DM Sans", "Garet", "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; /* Type scale — display uses League Spartan, tighter tracking */ --fs-display: 72px; --lh-display: 0.95; --tr-display: -0.02em; --fs-h1: 48px; --lh-h1: 1.05; --tr-h1: -0.015em; --fs-h2: 36px; --lh-h2: 1.1; --tr-h2: -0.01em; --fs-h3: 24px; --lh-h3: 1.2; --tr-h3: -0.005em; --fs-h4: 20px; --lh-h4: 1.3; --tr-h4: 0; --fs-body-lg: 18px; --lh-body-lg: 1.55; --fs-body: 16px; --lh-body: 1.6; --fs-body-sm: 14px; --lh-body-sm: 1.55; --fs-caption: 12px; --lh-caption: 1.4; --tr-caption: 0.08em; --fs-overline: 11px; --lh-overline:1.2; --tr-overline:0.16em; /* ── Spacing scale (4px base) ──────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; /* ── Layout ────────────────────────────────────────────────── */ --max-w: 1120px; --max-w-prose: 720px; --gutter: 24px; /* ── Radii (per brand guide) ───────────────────────────────── */ --r-button: 6px; /* buttons */ --r-card: 12px; /* cards */ --r-hero: 24px; /* large surfaces / hero blocks */ --r-pill: 999px; /* pills, badges, tags */ /* ── Shadows — soft, low-contrast ──────────────────────────── */ --shadow-xs: 0 1px 2px rgba(26,26,26,0.04); --shadow-sm: 0 2px 6px rgba(26,26,26,0.06), 0 1px 2px rgba(26,26,26,0.04); --shadow-md: 0 8px 24px rgba(26,26,26,0.08), 0 2px 4px rgba(26,26,26,0.04); --shadow-lg: 0 24px 48px rgba(26,26,26,0.12), 0 4px 8px rgba(26,26,26,0.05); /* ── Motion ────────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 400ms; } /* ── Element defaults ──────────────────────────────────────── */ html, body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, .display { font-family: var(--font-display); font-weight: 700; color: var(--fg); margin: 0; text-wrap: balance; } .display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); } h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); } h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); } h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); } h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); } p { margin: 0 0 var(--sp-4); text-wrap: pretty; max-width: var(--max-w-prose); } .body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); } .body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); } .eyebrow, .overline { font-family: var(--font-display); font-size: var(--fs-overline); letter-spacing: var(--tr-overline); text-transform: uppercase; font-weight: 600; color: var(--fg-muted); } .caption { font-size: var(--fs-caption); letter-spacing: var(--tr-caption); text-transform: uppercase; color: var(--fg-muted); } a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--accent-hover); } ::selection { background: var(--mbd-mist); color: var(--mbd-charcoal); }