/* PCHS design tokens — da _assets/DesignSystem/tokens/*.
   I @font-face vivono in theme.json (settings.typography.fontFamilies[].fontFace):
   qui si aliasano soltanto i preset generati da WordPress. */

:root {
	/* --- Font --- */
	--font-display: var( --wp--preset--font-family--display, "Playfair Display", "Times New Roman", Georgia, serif );
	--font-sans: var( --wp--preset--font-family--sans, Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif );
	--font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	/* --- Base palette: navy (autorità) --- */
	--navy-900: #04162e;
	--navy-800: #0a2342;
	--navy-700: #16345c;
	--navy-600: #24486f;
	--navy-400: #5b7093;
	--navy-200: #b9c4d3;

	/* --- Base palette: oro (certificazione) --- */
	--gold-700: #8a6a2e;
	--gold-600: #a8813c;
	--gold-500: #c5984d;
	--gold-400: #d1a962;
	--gold-300: #d9be86;
	--gold-200: #e8d6b3;
	--gold-100: #f3ead8;
	--gold-050: #fcf7ed;

	/* --- Base palette: neutri --- */
	--white: #ffffff;
	--paper: #f7f7f7;
	--surface-alt: #f2f2f0;
	--line-100: #e6e6e3;
	--line-200: #d5d5d0;
	--ink: #1a1a1a;
	--ink-muted: #55565a;
	--ink-faint: #8a8b8f;

	/* --- Semantici --- */
	--semantic-success: #2f6b47;
	--semantic-warning: #a8813c;
	--semantic-danger: #8f2f2f;
	--semantic-info: #16345c;

	/* --- Alias: superfici --- */
	--surface-page: var( --white );
	--surface-card: var( --white );
	--surface-muted: var( --paper );
	--surface-band: var( --navy-800 );
	--surface-band-deep: var( --navy-900 );
	--surface-gold: var( --gold-100 );
	--surface-gold-soft: var( --gold-050 );

	/* --- Alias: testo --- */
	--text-body: var( --ink );
	--text-muted: var( --ink-muted );
	--text-faint: var( --ink-faint );
	--text-heading: var( --navy-800 );
	--text-on-band: var( --white );
	--text-on-band-muted: var( --navy-200 );
	--text-accent: var( --gold-600 );
	--text-accent-on-band: var( --gold-400 );
	--text-link: var( --navy-800 );
	--text-link-hover: var( --gold-600 );

	/* --- Alias: filetti e accenti --- */
	--accent: var( --gold-500 );
	--accent-strong: var( --gold-600 );
	--border-hairline: var( --line-100 );
	--border-strong: var( --line-200 );
	--border-gold: var( --gold-300 );
	--border-on-band: rgba( 217, 190, 134, 0.45 );

	/* --- Scala tipografica --- */
	--text-xxs: 0.625rem;
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-md: 1rem;
	--text-lg: 1.375rem;
	--text-xl: 1.875rem;
	--text-display: 2.5rem;

	--leading-tight: 1.2;
	--leading-snug: 1.35;
	--leading-body: 1.6;
	--leading-loose: 1.75;

	--weight-light: 300;
	--weight-regular: 400;
	--weight-semibold: 600;
	--weight-bold: 700;
	--weight-black: 900;

	--tracking-tight: -0.01em;
	--tracking-normal: 0;
	--tracking-wide: 0.06em;
	--tracking-caps: 0.14em;
	--tracking-caps-wide: 0.22em;

	/* --- Spaziatura --- */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2rem;
	--space-xl: 3rem;
	--space-2xl: 4.5rem;
	--space-3xl: 6rem;

	--button-padding-block: 0.75rem;
	--button-padding-inline: 1.25rem;

	/* --- Bordi --- */
	--radius-none: 0;
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 8px;
	--radius-pill: 999px;
	--radius-circle: 50%;

	--border-width-hairline: 1px;
	--border-width-rule: 2px;
	--border-width-frame: 3px;

	--border-default: var( --border-width-hairline ) solid var( --border-hairline );
	--border-card: var( --border-width-hairline ) solid var( --border-strong );
	--border-accent: var( --border-width-hairline ) solid var( --border-gold );

	/* --- Elevazione: brand tipografico, ombre trattenute --- */
	--shadow-none: none;
	--shadow-card: 0 1px 2px rgba( 4, 22, 46, 0.06 );
	--shadow-raised: 0 4px 16px rgba( 4, 22, 46, 0.1 );
	--shadow-overlay: 0 16px 48px rgba( 4, 22, 46, 0.18 );
	--shadow-inset-gold: inset 0 0 0 1px var( --gold-300 );
	--focus-ring: 0 0 0 3px rgba( 197, 152, 77, 0.45 );

	/* --- Movimento --- */
	--duration-fast: 120ms;
	--duration-base: 200ms;
	--duration-slow: 360ms;
	--ease-standard: cubic-bezier( 0.4, 0, 0.2, 1 );
	--ease-out: cubic-bezier( 0.16, 1, 0.3, 1 );
	--transition-color: color var( --duration-base ) var( --ease-standard ), background-color var( --duration-base ) var( --ease-standard ), border-color var( --duration-base ) var( --ease-standard );

	/* --- Layout --- */
	--content-size: 720px;
	--wide-size: 1140px;
	--root-padding-inline: 1.5rem;
	--header-padding-block: 1.5rem;
	--footer-padding-block: 3rem;
	--measure: 68ch;
}

@media ( min-width: 62rem ) {
	:root {
		--text-md: 1.125rem;
		--text-lg: 1.75rem;
		--text-xl: 3rem;
		--text-display: 4.5rem;
	}
}