/* =========================================
   inkPad / Heading
   Token-driven heading system
========================================= */

.inkpad-scope .inkpad-heading,
.editor-styles-wrapper .inkpad-heading {
	--inkpad-heading-base: var(--inkpad-font-size-base, 16px);
	--inkpad-heading-ratio: var(--inkpad-heading-scale, 1.18);
	--inkpad-heading-size: calc(var(--inkpad-heading-base) * var(--inkpad-heading-ratio) * 1.6);
	--inkpad-heading-leading: var(--inkpad-line-height-tight, 1.12);

	margin-top: 0;
	margin-bottom: var(--inkpad-space-md, 1.5rem);
	max-width: none;
	color: var(--inkpad-text, currentColor);
	font-family: var(--inkpad-font-family, inherit);
	font-size: var(--inkpad-heading-size);
	font-weight: 600;
	line-height: var(--inkpad-heading-leading);
	letter-spacing: -0.025em;
	text-align: left;
	text-wrap: balance;
	background-color: transparent;
	background-image: none;
}

/* ---------- Level-driven default scale ---------- */

.inkpad-scope .inkpad-heading--level-h1,
.editor-styles-wrapper .inkpad-heading--level-h1 {
	--inkpad-heading-size: calc(var(--inkpad-heading-base) * var(--inkpad-heading-ratio) * 2.6);
}

.inkpad-scope .inkpad-heading--level-h2,
.editor-styles-wrapper .inkpad-heading--level-h2 {
	--inkpad-heading-size: calc(var(--inkpad-heading-base) * var(--inkpad-heading-ratio) * 2.1);
}

.inkpad-scope .inkpad-heading--level-h3,
.editor-styles-wrapper .inkpad-heading--level-h3 {
	--inkpad-heading-size: calc(var(--inkpad-heading-base) * var(--inkpad-heading-ratio) * 1.65);
}

.inkpad-scope .inkpad-heading--level-h4,
.editor-styles-wrapper .inkpad-heading--level-h4 {
	--inkpad-heading-size: calc(var(--inkpad-heading-base) * var(--inkpad-heading-ratio) * 1.35);
}

.inkpad-scope .inkpad-heading--level-h5,
.editor-styles-wrapper .inkpad-heading--level-h5 {
	--inkpad-heading-size: calc(var(--inkpad-heading-base) * var(--inkpad-heading-ratio) * 1.15);
	letter-spacing: -0.01em;
}

.inkpad-scope .inkpad-heading--level-h6,
.editor-styles-wrapper .inkpad-heading--level-h6 {
	--inkpad-heading-size: calc(var(--inkpad-heading-base) * var(--inkpad-heading-ratio) * 1);
	letter-spacing: 0;
	text-transform: uppercase;
}

/* ---------- Manual size overrides ---------- */

.inkpad-scope .inkpad-heading--size-display,
.editor-styles-wrapper .inkpad-heading--size-display {
	--inkpad-heading-size: calc(var(--inkpad-heading-base) * var(--inkpad-heading-ratio) * 3.2);
}

.inkpad-scope .inkpad-heading--size-xl,
.editor-styles-wrapper .inkpad-heading--size-xl {
	--inkpad-heading-size: calc(var(--inkpad-heading-base) * var(--inkpad-heading-ratio) * 2.6);
}

.inkpad-scope .inkpad-heading--size-lg,
.editor-styles-wrapper .inkpad-heading--size-lg {
	--inkpad-heading-size: calc(var(--inkpad-heading-base) * var(--inkpad-heading-ratio) * 2.1);
}

.inkpad-scope .inkpad-heading--size-md,
.editor-styles-wrapper .inkpad-heading--size-md {
	--inkpad-heading-size: calc(var(--inkpad-heading-base) * var(--inkpad-heading-ratio) * 1.65);
}

.inkpad-scope .inkpad-heading--size-sm,
.editor-styles-wrapper .inkpad-heading--size-sm {
	--inkpad-heading-size: calc(var(--inkpad-heading-base) * var(--inkpad-heading-ratio) * 1.25);
	letter-spacing: -0.01em;
}

/* ---------- Weight ---------- */

.inkpad-scope .inkpad-heading--weight-normal,
.editor-styles-wrapper .inkpad-heading--weight-normal {
	font-weight: var(--inkpad-weight-normal, 400);
}

.inkpad-scope .inkpad-heading--weight-medium,
.editor-styles-wrapper .inkpad-heading--weight-medium {
	font-weight: var(--inkpad-weight-medium, 500);
}

.inkpad-scope .inkpad-heading--weight-semibold,
.editor-styles-wrapper .inkpad-heading--weight-semibold {
	font-weight: var(--inkpad-weight-semibold, 600);
}

.inkpad-scope .inkpad-heading--weight-bold,
.editor-styles-wrapper .inkpad-heading--weight-bold {
	font-weight: var(--inkpad-weight-bold, 700);
}

/* ---------- Alignment ---------- */

.inkpad-scope .inkpad-heading--align-left,
.editor-styles-wrapper .inkpad-heading--align-left {
	text-align: left;
}

.inkpad-scope .inkpad-heading--align-center,
.editor-styles-wrapper .inkpad-heading--align-center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.inkpad-scope .inkpad-heading--align-right,
.editor-styles-wrapper .inkpad-heading--align-right {
	text-align: right;
	margin-left: auto;
}

/* ---------- Tone ---------- */

.inkpad-scope .inkpad-heading--tone-default,
.editor-styles-wrapper .inkpad-heading--tone-default {
	color: var(--inkpad-text, currentColor);
}

.inkpad-scope .inkpad-heading--tone-muted,
.editor-styles-wrapper .inkpad-heading--tone-muted {
	color: var(--inkpad-text-muted, var(--inkpad-text, currentColor));
}

.inkpad-scope .inkpad-heading--tone-light,
.editor-styles-wrapper .inkpad-heading--tone-light {
	color: var(--inkpad-heading-light-text, var(--inkpad-color-on-accent, #ffffff));
}

.inkpad-scope .inkpad-heading--tone-accent,
.editor-styles-wrapper .inkpad-heading--tone-accent {
	color: var(--inkpad-accent, var(--inkpad-text, currentColor));
}

/* ---------- Spacing ---------- */

.inkpad-scope .inkpad-heading--spacing-none,
.editor-styles-wrapper .inkpad-heading--spacing-none {
	margin-bottom: 0;
}

.inkpad-scope .inkpad-heading--spacing-xs,
.editor-styles-wrapper .inkpad-heading--spacing-xs {
	margin-bottom: var(--inkpad-space-xs, 0.5rem);
}

.inkpad-scope .inkpad-heading--spacing-sm,
.editor-styles-wrapper .inkpad-heading--spacing-sm {
	margin-bottom: var(--inkpad-space-sm, 1rem);
}

.inkpad-scope .inkpad-heading--spacing-md,
.editor-styles-wrapper .inkpad-heading--spacing-md {
	margin-bottom: var(--inkpad-space-md, 1.5rem);
}

.inkpad-scope .inkpad-heading--spacing-lg,
.editor-styles-wrapper .inkpad-heading--spacing-lg {
	margin-bottom: var(--inkpad-space-lg, 2rem);
}

.inkpad-scope .inkpad-heading--spacing-xl,
.editor-styles-wrapper .inkpad-heading--spacing-xl {
	margin-bottom: var(--inkpad-space-xl, 3rem);
}

/* ---------- Max width ---------- */

.inkpad-scope .inkpad-heading--max-sm,
.editor-styles-wrapper .inkpad-heading--max-sm {
	max-width: 12ch;
}

.inkpad-scope .inkpad-heading--max-md,
.editor-styles-wrapper .inkpad-heading--max-md {
	max-width: 18ch;
}

.inkpad-scope .inkpad-heading--max-lg,
.editor-styles-wrapper .inkpad-heading--max-lg {
	max-width: 24ch;
}

/* ---------- Mobile restraint ---------- */

@media (max-width: 640px) {
	.inkpad-scope .inkpad-heading,
	.editor-styles-wrapper .inkpad-heading {
		--inkpad-heading-ratio: min(var(--inkpad-heading-scale, 1.18), 1.16);
	}

	.inkpad-scope .inkpad-heading--size-display,
	.editor-styles-wrapper .inkpad-heading--size-display,
	.inkpad-scope .inkpad-heading--level-h1,
	.editor-styles-wrapper .inkpad-heading--level-h1 {
		--inkpad-heading-size: calc(var(--inkpad-heading-base) * var(--inkpad-heading-ratio) * 2.25);
	}
}
/* Heading should fill its parent; text alignment controls the content. */
.inkpad-scope .inkpad-heading,
.editor-styles-wrapper .inkpad-heading {
	display: block;
	width: 100%;
	max-width: 100%;
}

/* Max-width options create readable measure only when explicitly chosen. */
.inkpad-scope .inkpad-heading--max-sm,
.editor-styles-wrapper .inkpad-heading--max-sm {
	max-width: 12ch;
}

.inkpad-scope .inkpad-heading--max-md,
.editor-styles-wrapper .inkpad-heading--max-md {
	max-width: 18ch;
}

.inkpad-scope .inkpad-heading--max-lg,
.editor-styles-wrapper .inkpad-heading--max-lg {
	max-width: 24ch;
}

/* Center/right max-width headings need placement help. */
.inkpad-scope .inkpad-heading--align-center[class*="inkpad-heading--max-"],
.editor-styles-wrapper .inkpad-heading--align-center[class*="inkpad-heading--max-"] {
	margin-left: auto;
	margin-right: auto;
}

.inkpad-scope .inkpad-heading--align-right[class*="inkpad-heading--max-"],
.editor-styles-wrapper .inkpad-heading--align-right[class*="inkpad-heading--max-"] {
	margin-left: auto;
	margin-right: 0;
}