/*
 * DESIGN.md tokens exposed as custom properties.
 *
 * Values that theme.json already exposes (editor palette, sizes, spacing) are referenced
 * through their WordPress presets so there is a single source. Values theme.json keeps
 * under settings.custom are referenced via --wp--custom--*.
 *
 * Since 2026-09-21 the theme is an exact replica of the approved prototype
 * (pitalua-html-prototype-v2/): the block at the end declares the prototype's own custom
 * properties with their original names, so its rules port verbatim. Page stylesheets may also
 * use the prototype's literal one-off colours (spec transformacion-theme, amendment §11–§12).
 */

:root {
	/* --- Color: institutional --- */
	--color-primary: var( --wp--preset--color--primary, #52284a );
	--color-secondary: var( --wp--custom--color--secondary, #c39b4c );
	--color-surface: var( --wp--preset--color--surface, #f9f1e9 );

	/* --- Color: derived --- */
	--color-primary-hover: var( --wp--custom--color--primary-hover, #3f1e39 );
	--color-surface-alt: var( --wp--preset--color--surface-alt, #f2e6dc );
	--color-on-surface: var( --wp--preset--color--on-surface, #2f2430 );
	--color-on-surface-muted: var( --wp--preset--color--on-surface-muted, #746873 );
	--color-on-primary: var( --wp--custom--color--on-primary, #f9f1e9 );
	--color-on-primary-muted: var( --wp--custom--color--on-primary-muted, #ede3dc );
	--color-secondary-text: var( --wp--custom--color--secondary-text, #7a5f28 );
	--color-outline: var( --wp--custom--color--outline, #e8dccf );
	--color-outline-strong: var( --wp--custom--color--outline-strong, #8e7f6e );
	--color-error: var( --wp--custom--color--error, #8c2f39 );

	/*
	 * Text on the gold button. Not a palette colour: DESIGN.md fixes it for button-gold only
	 * (6.78:1 on #C39B4C).
	 */
	--color-on-secondary: #241421;

	/*
	 * Surfaces and hairlines of the prototype, expressed from the tokens above instead of the
	 * prototype's loose values (D4). The deep plum of page heroes, header and footer is
	 * primary-hover; translucent lines are mixes of a token with transparent.
	 */
	--surface-deep: var( --color-primary-hover );
	--line-on-surface: rgba( 82, 40, 74, 0.16 );
	--line-on-primary: rgba( 249, 241, 233, 0.17 );
	--line-on-primary-strong: color-mix( in srgb, var( --color-on-primary ) 42%, transparent );

	/* --- Typography: families --- */
	--font-sans: var( --wp--preset--font-family--montserrat );
	--font-display: var( --wp--preset--font-family--cinzel );

	/* --- Typography: the thirteen levels ---
	   Cinzel never goes below wght 400: it does not exist in the file. */
	--font-headline-display: 41px;
	--font-headline-lg: 33px;
	--font-headline-md: 27px;
	--font-quote: 24px;
	--font-quote-editorial: 18px;
	--font-numeral: 52px;
	--font-headline-sm: 21px;
	--font-title-md: 19px;
	--font-body-lg: 19px;
	--font-body-md: 17px;
	--font-body-sm: 15px;
	--font-label-lg: 14px;
	--font-label-md: 13px;

	/*
	 * Fluid display sizes taken from the prototype's clamp() values. The minimum of every
	 * text size in the site is label-md (13px): label-sm was retired on 2026-09-09.
	 */
	--font-fluid-hero: clamp( 1.8rem, 1.1rem + 2.6vw, 3.65rem );
	--font-fluid-page: clamp( 1.9rem, 1.3rem + 2vw, 3.2rem );
	--font-fluid-section: clamp( 1.7rem, 1.3rem + 1.4vw, 2.5rem );
	--font-fluid-lead: clamp( 1rem, 0.9rem + 0.35vw, 1.12rem );

	/* --- Spacing, 8px base unit --- */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-2xl: 48px;
	--space-3xl: 64px;
	--space-4xl: 80px;
	--space-5xl: 96px;
	--space-6xl: 128px;
	--space-section: clamp( 64px, 3rem + 5vw, 128px );

	/* --- Corner radii: strictly orthogonal; only "full" is round (WhatsApp, avatar) --- */
	--radius-none: 0;
	--radius-sm: 0;
	--radius-md: 0;
	--radius-full: 9999px;

	/* --- Grid --- */
	--layout-container: 1240px;
	--layout-container-text: 720px;
	--layout-gutter: 24px;
	--layout-measure-optimal: 52ch;
	--layout-measure-max: min( 60ch, 36em );
	--layout-page-margin: var( --space-md );
	--layout-header-height: 68px;

	/* --- Elevation: a single shadow across the whole system --- */
	--elevation-floating: 0 2px 12px rgba( 46, 26, 42, 0.14 );
	--rule-hairline: 1px solid var( --color-outline );
	--rule-strong: 1px solid var( --color-outline-strong );

	/* --- Motion --- */
	--motion-state: 180ms;
	--motion-enter: 300ms;
	--motion-ease: cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

/*
 * The prototype's own custom properties, verbatim (pitalua-html-prototype-v2, :root).
 */
:root {
	--plum: #52284a;
	--plum-deep: #3f1e39;
	--plum-soft: #68405f;
	--gold: #c39b4c;
	--ivory: #f9f1e9;
	--ivory-deep: #f2e6dc;
	--ink: #2f2430;
	--muted: #746873;
	--line: rgba( 82, 40, 74, 0.16 );
	--light-line: rgba( 249, 241, 233, 0.17 );
	--serif: var( --font-display );
	--sans: var( --font-sans );
	--max: 1240px;
	--ease: cubic-bezier( 0.22, 0.61, 0.36, 1 );
}

@media ( min-width: 768px ) {

	:root {
		--layout-page-margin: var( --space-lg );
		--layout-header-height: 74px;
	}
}

@media ( min-width: 1024px ) {

	:root {
		--layout-header-height: 82px;
	}
}