/* ---------------------------------------------------
   DESIGN TOKENS
--------------------------------------------------- */

:root {
	/* ---------------------------------------------------
	   TYPOGRAPHY
	--------------------------------------------------- */

	--font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--font-heading: "Vanitas-Bold", serif;
	--font-accent: "Work Sans", sans-serif;
	--font-script-fallback: "Allura", cursive;
	--font-script-consented: "lindsey-signature", sans-serif;
	--font-script: "lindsey-signature", sans-serif;
	--font-allcaps: "Work Sans", sans-serif;

	--font-size-body: 1.125rem;
	--font-size-h1: clamp(2.8rem, 5vw, 6rem);
	--font-size-script: 2.6rem;
	--font-size-accent: clamp(2.8rem, 5vw, 6rem);
	--font-size-emphasis: var(--text-h3);
	--font-color-script: #b78c17;

	--text-h2: 2.6rem;
	--text-h3: 1.4rem;
	--text-h4: 1.4rem;
	--text-h5: 1.25rem;
	--text-h6: 1.05rem;

	--letter-spacing-allcaps: 0.05em;
	--letter-spacing-accent: 0.01em;

	/* ---------------------------------------------------
	   RADIUS + SHADOW
	--------------------------------------------------- */

	--radius-sm: 5px;
	--shadow-button: 1px 2px 7px oklch(0 0 0 / 0.3);
	--shadow-text-teaser: 1px 1px 20px color(srgb 0 0 0 / 0.78);
	--shadow-text-hero: 0 1px 4px rgba(0, 0, 0, 0.3);

	/* ---------------------------------------------------
	   LAYOUT
	--------------------------------------------------- */

	--size-site-max: 2600px;
	--size-site-inner: calc(100% - 7vw);

	--size-content-max: 1520px;
	--size-content-narrow: 1220px;
	--size-content-wide: 1460px;
	--size-text-max: 960px;

	--size-menu-panel-max: 970px;
	--size-lightbox-max-width: 1200px;
	--size-lightbox-max-height: 1100px;

	/* Blocksy integration */
	--theme-narrow-container-max-width: var(--size-content-narrow);

	/* ---------------------------------------------------
	   SPACING
	--------------------------------------------------- */

	--space-2xs: 0.3125rem;
	--space-xs: 0.5rem;
	--space-sm: 0.75rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 2.6rem;

	--space-section: var(--theme-content-vertical-spacing);
	--space-block: var(--theme-content-vertical-spacing);
	--space-text-gap: clamp(1.25rem, 2vw, 2rem);

	/* ---------------------------------------------------
	   COLORS
	--------------------------------------------------- */

	--color-muted: #edebe9;

	/* ---------------------------------------------------
	   COMPONENT TOKENS
	--------------------------------------------------- */

	--menu-panel-padding: var(--space-xl);
	--menu-panel-gap-row: var(--space-sm);
	--menu-panel-gap-column: var(--space-xl);
	--menu-panel-column-min: 180px;

	--title-accent-offset-mobile: -19%;
	--title-accent-offset-tablet: -35%;

	--overlay-hero-strong: linear-gradient(
			to bottom,
			rgba(0, 0, 0, 0.88) 0%,
			rgba(0, 0, 0, 0.25) 13%,
			rgba(0, 0, 0, 0) 26%,
			rgba(0, 0, 0, 0) 69%,
			rgba(0, 0, 0, 0.25) 81%,
			rgba(0, 0, 0, 0.65) 100%
	);
	
	--make-button-round-size: 7.5rem;

	/* ---------------------------------------------------
	   SEMANTIC ALIASES
	--------------------------------------------------- */

	--section-full: var(--size-site-max);
	--section-wide: var(--size-content-max);
	--section-narrow: var(--size-content-narrow);
	--section-small: var(--size-text-max);
}

/* ---------------------------------------------------
   BREAKPOINTS
--------------------------------------------------- */

@media (min-width: 1000px) {
	:root {
		--font-size-body: 1.25rem;
		--text-h2: 4.5rem;
		--text-h3: 1.9rem;
		--text-h4: 1.728rem;
		--text-h5: 1.44rem;
		--text-h6: 1.2rem;

		--font-size-script: 3.5rem;
		
		--make-button-round-size: 9rem;
	}
}