.pinxel-text--auxiliary {
	color: var(--pinxel-component-highlight, var(--pinxel-color-primary-text, var(--pinxel-color-primary, #5b3df5)));
	font-family: var(--pinxel-font-auxiliary, Didot, "Bodoni 72", "Bodoni MT", "Times New Roman", serif);
	font-style: italic;
	font-weight: 400;
}

.pinxel-text--primary,
.pinxel-text--primary .pinxel-text--auxiliary,
.pinxel-text--auxiliary .pinxel-text--primary {
	color: var(--pinxel-color-primary-text, var(--pinxel-color-primary, #5b3df5));
}

.pinxel-text--secondary,
.pinxel-text--secondary .pinxel-text--auxiliary,
.pinxel-text--auxiliary .pinxel-text--secondary {
	color: var(--pinxel-color-secondary, #18181b);
}

.pinxel-component-scheme--light.pinxel-component-background--base {
	--pinxel-component-background: var(--pinxel-color-background, #fff);
	--pinxel-component-elevated: var(--pinxel-color-surface, #f5f5f7);
	--pinxel-component-text: var(--pinxel-color-text, #18181b);
	--pinxel-component-muted: var(--pinxel-color-muted, #63636e);
	--pinxel-component-highlight: var(--pinxel-color-primary-text, var(--pinxel-color-primary, #5b3df5));
	--pinxel-component-highlight-soft: var(--pinxel-color-primary-soft, color-mix(in srgb, var(--pinxel-color-primary, #5b3df5) 12%, var(--pinxel-color-surface, #f5f5f7)));
	--pinxel-component-overlay: linear-gradient(90deg, color-mix(in srgb, var(--pinxel-color-background, #fff) 88%, transparent), color-mix(in srgb, var(--pinxel-color-background, #fff) 42%, transparent));
}

.pinxel-component-scheme--light.pinxel-component-background--soft {
	--pinxel-component-background: var(--pinxel-color-surface, #f5f5f7);
	--pinxel-component-elevated: var(--pinxel-color-background, #fff);
	--pinxel-component-text: var(--pinxel-color-text, #18181b);
	--pinxel-component-muted: var(--pinxel-color-muted, #63636e);
	--pinxel-component-highlight: var(--pinxel-color-primary-text, var(--pinxel-color-primary, #5b3df5));
	--pinxel-component-highlight-soft: var(--pinxel-color-primary-soft, color-mix(in srgb, var(--pinxel-color-primary, #5b3df5) 12%, var(--pinxel-color-surface, #f5f5f7)));
	--pinxel-component-overlay: linear-gradient(90deg, color-mix(in srgb, var(--pinxel-color-surface, #f5f5f7) 90%, transparent), color-mix(in srgb, var(--pinxel-color-surface, #f5f5f7) 44%, transparent));
}

.pinxel-component-scheme--dark.pinxel-component-background--base {
	--pinxel-component-background: var(--pinxel-color-dark-background, #18181b);
	--pinxel-component-elevated: var(--pinxel-color-dark-surface, #27272a);
	--pinxel-component-text: var(--pinxel-color-dark-text, #fff);
	--pinxel-component-muted: var(--pinxel-color-dark-muted, #d4d4d8);
	--pinxel-component-highlight: var(--pinxel-color-accent, #f4b942);
	--pinxel-component-highlight-soft: color-mix(in srgb, var(--pinxel-color-accent, #f4b942) 14%, transparent);
	--pinxel-component-overlay: linear-gradient(90deg, color-mix(in srgb, var(--pinxel-color-dark-background, #18181b) 86%, transparent), color-mix(in srgb, var(--pinxel-color-dark-background, #18181b) 36%, transparent));
}

.pinxel-component-scheme--dark.pinxel-component-background--soft {
	--pinxel-component-background: var(--pinxel-color-dark-surface, #27272a);
	--pinxel-component-elevated: var(--pinxel-color-dark-background, #18181b);
	--pinxel-component-text: var(--pinxel-color-dark-text, #fff);
	--pinxel-component-muted: var(--pinxel-color-dark-muted, #d4d4d8);
	--pinxel-component-highlight: var(--pinxel-color-accent, #f4b942);
	--pinxel-component-highlight-soft: color-mix(in srgb, var(--pinxel-color-accent, #f4b942) 14%, transparent);
	--pinxel-component-overlay: linear-gradient(90deg, color-mix(in srgb, var(--pinxel-color-dark-surface, #27272a) 88%, transparent), color-mix(in srgb, var(--pinxel-color-dark-surface, #27272a) 38%, transparent));
}

.pinxel-component-scheme--light.pinxel-component-background--primary {
	--pinxel-component-background: var(--pinxel-color-primary, #5b3df5);
	--pinxel-component-elevated: color-mix(in srgb, var(--pinxel-color-primary, #5b3df5) 82%, #fff);
	--pinxel-component-text: var(--pinxel-color-on-primary, var(--pinxel-color-text, #18181b));
	--pinxel-component-muted: color-mix(in srgb, var(--pinxel-color-on-primary, var(--pinxel-color-text, #18181b)) 72%, transparent);
	--pinxel-component-highlight: var(--pinxel-color-on-primary, var(--pinxel-color-text, #18181b));
	--pinxel-component-highlight-soft: color-mix(in srgb, var(--pinxel-color-on-primary, var(--pinxel-color-text, #18181b)) 14%, transparent);
}

.pinxel-component-scheme--dark.pinxel-component-background--primary {
	--pinxel-component-background: var(--pinxel-color-primary, #5b3df5);
	--pinxel-component-elevated: color-mix(in srgb, var(--pinxel-color-primary, #5b3df5) 78%, #000);
	--pinxel-component-text: var(--pinxel-color-on-primary, var(--pinxel-color-dark-text, #fff));
	--pinxel-component-muted: color-mix(in srgb, var(--pinxel-color-on-primary, var(--pinxel-color-dark-text, #fff)) 78%, transparent);
	--pinxel-component-highlight: var(--pinxel-color-on-primary, var(--pinxel-color-dark-text, #fff));
	--pinxel-component-highlight-soft: color-mix(in srgb, var(--pinxel-color-on-primary, var(--pinxel-color-dark-text, #fff)) 16%, transparent);
}

.pinxel-section-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	margin-top: clamp(2rem, 4vw, 3rem);
}

.pinxel-section-action {
	align-items: center;
	border: var(--pinxel-button-border-width, 2px) solid transparent;
	border-radius: var(--pinxel-button-radius, 8px);
	box-sizing: border-box;
	display: inline-flex;
	font-family: var(--pinxel-font-body, sans-serif);
	font-size: var(--pinxel-button-font-size, 1rem);
	font-weight: var(--pinxel-button-font-weight, 700);
	justify-content: center;
	line-height: 1.2;
	padding: var(--pinxel-button-padding-y, 0.9rem) var(--pinxel-button-padding-x, 1.35rem);
	text-align: center;
	text-decoration: none;
	transition: filter 160ms ease, transform 160ms ease;
}

.pinxel-section-action--primary {
	background: var(--pinxel-color-primary, #5b3df5);
	color: var(--pinxel-color-on-primary, #fff);
}

.pinxel-section-action--secondary {
	background: transparent;
	border-color: currentColor;
	color: var(--pinxel-component-text, var(--pinxel-color-text, #18181b));
}

.pinxel-section-action:hover,
.pinxel-section-action:focus-visible {
	filter: brightness(0.92);
	text-decoration: none;
	transform: translateY(-1px);
}

.pinxel-section-action:focus-visible {
	outline: 3px solid var(--pinxel-color-accent, #f4b942);
	outline-offset: 3px;
}

@media (max-width: 480px) {
	.pinxel-section-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.pinxel-section-action {
		width: 100%;
	}
}