/* ─── Spacing Presets ─────────────────────────────────────────────────
   Override spacing and sizing only — typeface fonts and colors are untouched.
   Activated via data-spacing attribute on <html>.
   "default" = no attribute / current typeface behavior unchanged.

   Specificity note: typeface selectors use [data-typeface][data-typeface] (0,2,0).
   We double the attribute selector to match, then win by source order.
   ──────────────────────────────────────────────────────────────────── */

/* ─── Butterick ──────────────────────────────────────────────────────
   Based on Practical Typography. Minimal heading sizes, tight leading,
   space-as-emphasis, hollow bullets, deep blockquote indent, kerning.
   ──────────────────────────────────────────────────────────────────── */

[data-spacing="butterick"][data-spacing="butterick"] {
  --editor-line-height: 1.4;
  --h1-size: calc(var(--editor-font-size) * 1.28);
  --h2-size: calc(var(--editor-font-size) * 1.11);
  --editor-max-width: 65ch;
  --blockquote-font-size: 0.9em;
}

[data-spacing="butterick"] .tiptap {
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
}

[data-spacing="butterick"] .tiptap h1 { margin-top: 2em; margin-bottom: 0.4em; }
[data-spacing="butterick"] .tiptap h2 { margin-top: 1.6em; margin-bottom: 0.35em; }
[data-spacing="butterick"] .tiptap h3 { margin-top: 1.2em; margin-bottom: 0.25em; }
[data-spacing="butterick"] .tiptap h1:first-child { margin-top: 0; }
[data-spacing="butterick"] .tiptap p { margin-bottom: 0.75em; }
[data-spacing="butterick"] .tiptap blockquote { margin-left: 2em; padding-left: 1em; line-height: 1.3; }
[data-spacing="butterick"] .tiptap ul { list-style-type: circle; }

/* ─── Web ────────────────────────────────────────────────────────────
   Industry standard web typography. Values from Tailwind Typography
   prose-base (verified from source), Material Design 3, NN/g.
   Line-height 1.75, heading scale 2.25/1.5/1.25×, 65ch max-width.
   ──────────────────────────────────────────────────────────────────── */

[data-spacing="web"][data-spacing="web"] {
  --editor-line-height: 1.75;
  --h1-size: calc(var(--editor-font-size) * 2.25);
  --h2-size: calc(var(--editor-font-size) * 1.5);
  --editor-max-width: 65ch;
}

[data-spacing="web"] .tiptap {
  font-kerning: normal;
}

[data-spacing="web"] .tiptap h1 { margin-top: 0; margin-bottom: 0.89em; }
[data-spacing="web"] .tiptap h2 { margin-top: 2em; margin-bottom: 1em; }
[data-spacing="web"] .tiptap h3 { margin-top: 1.6em; margin-bottom: 0.6em; }
[data-spacing="web"] .tiptap p { margin-bottom: 1.25em; }

/* ─── Blog ──────────────────────────────────────────────────────────
   Blog/newsletter typography based on Substack's reading experience.
   Line-height 1.6, heading scale 2.0/1.625/1.375×, 728px max-width,
   uniform heading margins (1em top / 0.625em bottom).
   ──────────────────────────────────────────────────────────────────── */

[data-spacing="blog"][data-spacing="blog"] {
  --editor-line-height: 1.6;
  --h1-size: calc(var(--editor-font-size) * 2);
  --h2-size: calc(var(--editor-font-size) * 1.625);
  --editor-max-width: 728px;
}

[data-spacing="blog"] .tiptap {
  font-kerning: normal;
}

[data-spacing="blog"] .tiptap h1 { margin-top: 1em; margin-bottom: 0.625em; }
[data-spacing="blog"] .tiptap h2 { margin-top: 1em; margin-bottom: 0.625em; }
[data-spacing="blog"] .tiptap h3 { margin-top: 1em; margin-bottom: 0.625em; }
[data-spacing="blog"] .tiptap h1:first-child { margin-top: 0; }
[data-spacing="blog"] .tiptap p { margin-bottom: 1.05em; }
