:root {
  /* === Heading Colors & Font Sizes === */
  /* These remain variables because they reference semantic tokens */

  --el-h1-color: var(--color-text-primary);
  --el-h1-font-family: var(--font-display);
  --el-h1-font-size: var(--typo-size-7xl);

  --el-h2-color: var(--color-text-primary);
  --el-h2-font-family: var(--font-header);
  --el-h2-font-size: var(--typo-size-5xl);

  --el-h3-color: var(--color-text-secondary);
  --el-h3-font-family: var(--font-header);
  --el-h3-font-size: var(--typo-size-4xl);

  --el-h4-color: var(--color-text-secondary);
  --el-h4-font-family: var(--font-header);
  --el-h4-font-size: var(--typo-size-3xl);

  --el-h5-color: var(--color-text-secondary);
  --el-h5-font-family: var(--font-header);
  --el-h5-font-size: var(--typo-size-2xl);

  --el-h6-color: var(--color-text-secondary);
  --el-h6-font-family: var(--font-header);
  --el-h6-font-size: var(--typo-size-xl);

  /* === Heading Vertical Spacing === */
  --el-h1-vspace-base: calc(1em * 1.125);
  --el-h1-vspace-top: calc(var(--el-h1-vspace-base) * var(--vspace-spacious));
  --el-h1-vspace-bottom: calc(
    var(--el-h1-vspace-base) * var(--vspace-comfortable)
  );

  --el-h2-vspace-base: calc(1em * 1.1765);
  --el-h2-vspace-top: calc(var(--el-h2-vspace-base) * var(--vspace-snug));
  --el-h2-vspace-bottom: calc(
    var(--el-h2-vspace-base) * var(--vspace-compressed)
  );

  --el-h3-vspace-base: calc(1em * 1.2);
  --el-h3-vspace-top: calc(var(--el-h3-vspace-base) * var(--vspace-cozy));
  --el-h3-vspace-bottom: calc(var(--el-h3-vspace-base) * var(--vspace-snug));

  --el-h4-vspace-base: calc(1em * 1.125);
  --el-h4-vspace-top: calc(var(--el-h4-vspace-base) * var(--vspace-normal));
  --el-h4-vspace-bottom: calc(var(--el-h4-vspace-base) * var(--vspace-tight));

  --el-h5-vspace-base: calc(1em * 1.28);
  --el-h5-vspace-top: calc(var(--el-h5-vspace-base) * var(--vspace-cozy));
  --el-h5-vspace-bottom: calc(var(--el-h5-vspace-base) * var(--vspace-tight));

  --el-h6-vspace-base: calc(1em * 1.4);
  --el-h6-vspace-top: calc(var(--el-h6-vspace-base) * var(--vspace-snug));
  --el-h6-vspace-bottom: calc(
    var(--el-h6-vspace-base) * var(--vspace-compressed)
  );

  /* === Body Text === */
  --el-p-color: var(--color-text-primary);
  --el-p-font-family: var(--font-body);
  --el-p-font-size: var(--typo-size-md);
  --el-p-vspace-base: calc(1em * var(--typo-leading-normal));
  --el-p-vspace-top: calc(var(--el-p-vspace-base) * var(--vspace-snug));
  --el-p-vspace-bottom: calc(var(--el-p-vspace-base) * var(--vspace-snug));

  /* === Blockquote === */
  --el-blockquote-color: var(--color-text-tertiary);
  --el-blockquote-font-family: var(--font-body);
  --el-blockquote-font-size: var(--typo-size-md);
  --el-blockquote-vspace-base: calc(1em * var(--typo-leading-comfortable));
  --el-blockquote-vspace-top: calc(
    var(--el-blockquote-vspace-base) * var(--vspace-snug)
  );
  --el-blockquote-vspace-bottom: calc(
    var(--el-blockquote-vspace-base) * var(--vspace-snug)
  );

  /* === Pre / Code === */
  --el-pre-color: var(--color-text-inverse);
  --el-pre-background: var(--color-surface-inverse);
  --el-pre-font-family: var(--font-mono);
  --el-pre-font-size: var(--typo-size-sm);
  --el-pre-vspace-base: calc(1em * 1.5385);
  --el-pre-vspace-top: calc(var(--el-pre-vspace-base) * var(--vspace-normal));
  --el-pre-vspace-bottom: calc(
    var(--el-pre-vspace-base) * var(--vspace-normal)
  );

  /* === Lists === */
  --el-list-color: var(--color-text-primary);
  --el-list-font-size: var(--typo-size-md);
  --el-list-vspace-base: calc(1em * var(--typo-leading-normal));
  --el-list-vspace-top: calc(var(--el-list-vspace-base) * var(--vspace-snug));
  --el-list-vspace-bottom: calc(
    var(--el-list-vspace-base) * var(--vspace-snug)
  );
  --el-list-nested-vspace-top: calc(
    var(--el-list-vspace-base) * var(--vspace-snug)
  );
  --el-list-nested-vspace-bottom: calc(
    var(--el-list-vspace-base) * var(--vspace-snug)
  );
  --el-li-vspace-top: calc(var(--el-list-vspace-base) * var(--vspace-snug));
  --el-li-vspace-bottom: calc(var(--el-list-vspace-base) * var(--vspace-snug));
  --el-li-nested-vspace-top: calc(
    var(--el-list-vspace-base) * var(--vspace-tight)
  );
  --el-li-nested-vspace-bottom: calc(
    var(--el-list-vspace-base) * var(--vspace-tight)
  );

  /* === Table === */
  --el-th-color: var(--color-text-inverse);
  --el-th-background: var(--color-surface-inverse);
  --el-th-font-family: var(--font-header);
  --el-td-color: var(--color-text-primary);
  --el-td-font-family: var(--font-mono);

  /* === DL/DT/DD === */
  --el-dt-color: var(--color-text-inverse);
  --el-dt-background: var(--color-surface-inverse);
  --el-dt-font-family: var(--font-header);
  --el-dd-color: var(--color-text-primary);
  --el-dd-font-family: var(--font-body);

  /* === HR === */
  --hr-color: var(--color-text-tertiary);
  --hr-symbol-color: var(--color-text-tertiary);
  --hr-symbol-background: var(--color-surface-base);
}