/**
 * Token del tema MediSuite.
 *
 * I colori base arrivano dai preset di theme.json (modificabili dalle
 * Impostazioni MediSuite). Le sfumature derivate riproducono i valori del
 * sito GPT: il blocco senza @supports contiene i valori statici, il blocco
 * con @supports li ricalcola con color-mix() dai colori base. Le proprietà
 * personalizzate non hanno ripiego automatico, per questo serve @supports.
 */

:root {
	--ms-white: var(--wp--preset--color--white, #fff);
	--ms-black: #000;
	--ms-primary: var(--wp--preset--color--primary, #0a3c6e);
	--ms-primary-hover: var(--wp--preset--color--primary-hover, #0d4f8f);
	--ms-accent: var(--wp--preset--color--accent, #fbad48);
	--ms-background: var(--wp--preset--color--background, #f8f8f8);
	--ms-tint: var(--wp--preset--color--tint, #edf2f8);
	--ms-text-muted: var(--wp--preset--color--text-muted, #555e6d);
	--ms-line: var(--wp--preset--color--line, #dce3ec);

	/* Sfumature derivate: valori del sito GPT. */
	--ms-shadow-base: #082f57;
	--ms-visual-border: #dce5ef;
	--ms-connector: #b9cce0;
	--ms-visual-divider: #cedbeb;
	--ms-visual-text: #526780;
	--ms-visual-icon: #7f97b4;
	--ms-on-primary-soft: #d2e1f3;
	--ms-on-primary-text: #c3d5e9;
	--ms-on-primary-line: #385e86;
	--ms-featured-text: #29496a;
	--ms-featured-line: #d48c32;
	--ms-example-bg: #fff5e6;
	--ms-example-border: #edbd7e;
	--ms-example-text: #665039;
	--ms-example-icon: #a56614;
	--ms-input-border: #c6d4e4;
	--ms-body-text: #384d63;
	--ms-body-strong: #1e3956;
	--ms-node-hover-border: #a4bbd4;
	--ms-card-hover-border: #b6c9dd;
	--ms-accent-hover: #ffc166;
	--ms-pill-bg: #fff0dc;
	--ms-pill-text: #7e4b08;
	--ms-toggle-hover: rgb(10 60 110 / 4%);
	--ms-error: #b3261e;

	/* Ombre. */
	--ms-shadow-button: 0 7px 16px rgb(8 47 87 / 9%);
	--ms-shadow-card: 0 12px 28px rgb(10 60 110 / 7%);
	--ms-shadow-header: 0 4px 24px rgb(8 47 87 / 6%);
	--ms-shadow-menu: 0 14px 38px rgb(8 47 87 / 10%);
	--ms-shadow-node: 0 9px 20px rgb(8 47 87 / 8%);
	--ms-shadow-soft: 0 10px 25px rgb(10 60 110 / 5%);

	/* Tipografia e misure. */
	--ms-font-heading: var(--wp--preset--font-family--heading, Manrope, sans-serif);
	--ms-font-body: var(--wp--preset--font-family--body, "DM Sans", sans-serif);
	--ms-container: 1280px;
	--ms-gutter: max(5.5%, calc((100vw - 1280px) / 2));
	--ms-section-pad: 90px;
	--ms-header-h: 96px;
	--ms-radius-button: 7px;
	--ms-radius-card: 13px;
	--ms-radius-small: 6px;
	--ms-radius-node: 11px;
	--ms-radius-menu: 12px;
	--ms-radius-panel: 20px;
	--ms-ease: cubic-bezier(.2, .65, .3, 1);

	/* Sfondi di header e footer: le Impostazioni MediSuite li sovrascrivono. */
	--ms-header-bg: var(--ms-background);
	--ms-header-bg-scrolled: var(--ms-white);
	--ms-footer-bg: var(--ms-background);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	:root {
		--ms-shadow-base: color-mix(in srgb, var(--ms-primary) 79%, var(--ms-black));
		--ms-visual-border: color-mix(in srgb, var(--ms-primary) 7%, var(--ms-tint));
		--ms-connector: color-mix(in srgb, var(--ms-primary-hover) 23%, var(--ms-tint));
		--ms-visual-divider: color-mix(in srgb, var(--ms-primary-hover) 13%, var(--ms-tint));
		--ms-visual-text: color-mix(in srgb, color-mix(in srgb, var(--ms-primary) 39%, var(--ms-text-muted)) 87%, var(--ms-white));
		--ms-visual-icon: color-mix(in srgb, var(--ms-primary) 49%, var(--ms-tint));
		--ms-on-primary-soft: color-mix(in srgb, var(--ms-tint) 90%, var(--ms-primary-hover));
		--ms-on-primary-text: color-mix(in srgb, var(--ms-white) 77%, var(--ms-primary-hover));
		--ms-on-primary-line: color-mix(in srgb, var(--ms-white) 18%, var(--ms-primary));
		--ms-featured-text: color-mix(in srgb, var(--ms-primary) 87%, var(--ms-accent));
		--ms-featured-line: color-mix(in srgb, var(--ms-accent) 81%, var(--ms-black));
		--ms-example-bg: color-mix(in srgb, var(--ms-accent) 13%, var(--ms-white));
		--ms-example-border: color-mix(in srgb, color-mix(in srgb, var(--ms-accent) 91%, var(--ms-black)) 68%, var(--ms-white));
		--ms-example-text: color-mix(in srgb, color-mix(in srgb, var(--ms-accent) 52%, var(--ms-black)) 75%, var(--ms-primary));
		--ms-example-icon: color-mix(in srgb, var(--ms-accent) 62%, var(--ms-black));
		--ms-input-border: color-mix(in srgb, var(--ms-primary-hover) 18%, var(--ms-tint));
		--ms-body-text: color-mix(in srgb, color-mix(in srgb, var(--ms-primary) 29%, var(--ms-text-muted)) 90%, var(--ms-black));
		--ms-body-strong: color-mix(in srgb, color-mix(in srgb, var(--ms-primary) 62%, var(--ms-text-muted)) 78%, var(--ms-black));
		--ms-node-hover-border: color-mix(in srgb, var(--ms-primary-hover) 33%, var(--ms-tint));
		--ms-card-hover-border: color-mix(in srgb, var(--ms-primary-hover) 25%, var(--ms-tint));
		--ms-accent-hover: color-mix(in srgb, var(--ms-accent) 81%, var(--ms-white));
		--ms-pill-bg: color-mix(in srgb, var(--ms-accent) 19%, var(--ms-white));
		--ms-pill-text: color-mix(in srgb, var(--ms-accent) 45%, var(--ms-black));
		--ms-toggle-hover: color-mix(in srgb, var(--ms-primary) 4%, transparent);
		--ms-shadow-button: 0 7px 16px color-mix(in srgb, var(--ms-shadow-base) 9%, transparent);
		--ms-shadow-card: 0 12px 28px color-mix(in srgb, var(--ms-primary) 7%, transparent);
		--ms-shadow-header: 0 4px 24px color-mix(in srgb, var(--ms-shadow-base) 6%, transparent);
		--ms-shadow-menu: 0 14px 38px color-mix(in srgb, var(--ms-shadow-base) 10%, transparent);
		--ms-shadow-node: 0 9px 20px color-mix(in srgb, var(--ms-shadow-base) 8%, transparent);
		--ms-shadow-soft: 0 10px 25px color-mix(in srgb, var(--ms-primary) 5%, transparent);
	}
}

@media (max-width: 1050px) {
	:root {
		--ms-section-pad: 65px;
	}
}

@media (max-width: 720px) {
	:root {
		--ms-header-h: 82px;
		--ms-gutter: 6%;
		--ms-section-pad: 55px;
	}
}