/* My Own Fitness — tokens generated from tokens.json (design system approved Oct 2026). Do not edit by hand: edit tokens.json and regenerate. */
:root {
  /* Colors (light theme = default site theme) */
  --mof-grad-blue: #5570fe;
  --mof-grad-violet: #a06ce5;
  --mof-grad-pink: #fb66c5;
  --mof-ink: #0a083b;
  --mof-ink-body: #57586e;
  --mof-ink-muted: #676c80;
  --mof-surface: #ffffff;
  --mof-surface-soft: #eaf1f8;
  --mof-surface-sunk: #f3f3f3;
  --mof-line: #e3e6ee;
  --mof-link: #3e64de;
  --mof-focus-ring: #3e64de;
  --mof-star: #ed9700;
  --mof-raspberry: #d04967;
  --mof-mint: #e2eeee;
  --mof-sky: #d9ebef;
  --mof-sage: #c7d1d0;
  --mof-sand: #dcd3ca;
  --mof-on-pink: #0a083b;
  --mof-on-gradient: #ffffff;
  --mof-on-ink: #ffffff;
  --mof-error: #b42318;
  /* Spacing */
  --mof-space-1: 4px;
  --mof-space-2: 8px;
  --mof-space-3: 12px;
  --mof-space-4: 16px;
  --mof-space-5: 24px;
  --mof-space-6: 32px;
  --mof-space-7: 48px;
  --mof-space-8: 64px;
  --mof-space-9: 96px;
  /* Radius */
  --mof-radius-sm: 6px;
  --mof-radius-md: 12px;
  --mof-radius-lg: 24px;
  --mof-radius-pill: 108px;
  /* Shadows */
  --mof-shadow-card: 0 10px 30px rgba(10, 8, 59, 0.08);
  --mof-shadow-cover: 0 18px 40px rgba(10, 8, 59, 0.22);
  /* Font families */
  --mof-font-display: Poppins, 'Trebuchet MS', Arial, sans-serif;
  --mof-font-text: Inter, 'Segoe UI', Arial, sans-serif;
  /* Brand gradient (old site hero, measured) */
  --mof-gradient: linear-gradient(90deg, var(--mof-grad-blue) 0%, var(--mof-grad-violet) 50%, var(--mof-grad-pink) 100%);
}

/* Optional dark theme. Phase 1 ships light only; enable by setting data-theme="dark" on <html>. */
:root[data-theme="dark"] {
  --mof-grad-blue: #6f86ff;
  --mof-grad-violet: #b386f0;
  --mof-grad-pink: #ff7fd0;
  --mof-ink: #f3f1ff;
  --mof-ink-body: #c4c3da;
  --mof-ink-muted: #a3a6bc;
  --mof-surface: #110f33;
  --mof-surface-soft: #1a1844;
  --mof-surface-sunk: #0b0a26;
  --mof-line: #2c2a5c;
  --mof-link: #8ea4ff;
  --mof-focus-ring: #8ea4ff;
  --mof-star: #f5b23a;
  --mof-raspberry: #e46a85;
  --mof-on-gradient: #0a083b;
  --mof-on-ink: #110f33;
  --mof-error: #ff8a80;
  --mof-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45);
  --mof-shadow-cover: 0 18px 40px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

/* Type styles as utility classes */
.mof-t-display { font-family: var(--mof-font-display); font-size: 56px; line-height: 64px; font-weight: 700; letter-spacing: -0.01em; }
.mof-t-heading-1 { font-family: var(--mof-font-display); font-size: 40px; line-height: 48px; font-weight: 700; }
.mof-t-heading-2 { font-family: var(--mof-font-display); font-size: 32px; line-height: 40px; font-weight: 600; }
.mof-t-heading-3 { font-family: var(--mof-font-display); font-size: 22px; line-height: 30px; font-weight: 600; }
.mof-t-eyebrow { font-family: var(--mof-font-display); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.mof-t-button { font-family: var(--mof-font-display); font-size: 16px; line-height: 24px; font-weight: 600; }
.mof-t-price { font-family: var(--mof-font-display); font-size: 28px; line-height: 32px; font-weight: 700; }
.mof-t-lead { font-family: var(--mof-font-text); font-size: 20px; line-height: 32px; font-weight: 400; }
.mof-t-body { font-family: var(--mof-font-text); font-size: 18px; line-height: 30px; font-weight: 400; }
.mof-t-small { font-family: var(--mof-font-text); font-size: 15px; line-height: 22px; font-weight: 500; }