/**
 * Token del tema Genomedics.
 *
 * I colori base arrivano dai preset di theme.json (modificabili dalle
 * Impostazioni Genomedics). Le tinte derivate riproducono i valori della bozza
 * GPT: il blocco senza @supports contiene i valori statici, il blocco con
 * @supports li ricalcola con color-mix() dai colori base.
 */

:root {
	--gm-white: var(--wp--preset--color--white, #fff);
	--gm-ink: var(--wp--preset--color--ink, #17384b);
	--gm-brand: var(--wp--preset--color--brand, #0076ae);
	--gm-brand-hover: var(--wp--preset--color--brand-hover, #005e8b);
	--gm-mist: var(--wp--preset--color--mist, #f2f8fc);
	--gm-sky: var(--wp--preset--color--sky, #e2f1fb);
	--gm-muted: var(--wp--preset--color--muted, #566b76);
	--gm-line: var(--wp--preset--color--line, #dce7ee);
	--gm-night: var(--wp--preset--color--night, #102f43);

	/* Tinte derivate: valori della bozza GPT. */
	--gm-line-strong: #adbfc3;
	--gm-button-line: #b7c9d1;
	--gm-link-line: #9aadb3;
	--gm-card-border: #e0ecf4;
	--gm-brand-soft: #e7f3fb;
	--gm-on-night: #dae5e8;
	--gm-on-night-soft: #bccdd3;
	--gm-on-night-line: rgb(255 255 255 / 15%);
	--gm-header-bg: rgb(255 255 255 / 96%);
	--gm-orbit-glow: #edf7fd;
	--gm-orbit-ground: #d9ecf8;
	--gm-orbit-grid: rgb(0 118 174 / 17%);
	--gm-orbit-ring: rgb(0 118 174 / 24%);
	--gm-orbit-ring-soft: rgb(0 118 174 / 16%);
	--gm-orbit-shadow: rgb(0 118 174 / 22%);
	--gm-place-line: rgb(0 118 174 / 9%);
	--gm-place-halo: rgb(0 118 174 / 13%);

	/* Ombre. */
	--gm-shadow-header: 0 6px 24px rgb(16 47 67 / 7%);
	--gm-shadow-menu: 0 20px 25px rgb(16 47 67 / 7%);

	/* Tipografia e misure. */
	--gm-font-heading: var(--wp--preset--font-family--heading, Manrope, sans-serif);
	--gm-font-body: var(--wp--preset--font-family--body, "DM Sans", sans-serif);
	--gm-container: 1280px;
	--gm-pad-x: 5.3vw;
	--gm-gutter: max(5.3vw, calc((100vw - 1280px) / 2));
	--gm-header-h: 100px;
	--gm-radius-button: 5px;
	--gm-radius-card: 8px;
	--gm-radius-panel: 10px;
	--gm-ease: cubic-bezier(.2, .65, .3, 1);
	--gm-h2: clamp(30px, 3.3vw, 46px);
	--gm-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	:root {
		--gm-line-strong: color-mix(in srgb, var(--gm-muted) 45%, var(--gm-white));
		--gm-button-line: color-mix(in srgb, var(--gm-muted) 40%, var(--gm-white));
		--gm-link-line: color-mix(in srgb, var(--gm-muted) 58%, var(--gm-white));
		--gm-card-border: color-mix(in srgb, var(--gm-brand) 8%, var(--gm-mist));
		--gm-brand-soft: color-mix(in srgb, var(--gm-brand) 9%, var(--gm-white));
		--gm-on-night: color-mix(in srgb, var(--gm-night) 14%, var(--gm-white));
		--gm-on-night-soft: color-mix(in srgb, var(--gm-night) 25%, var(--gm-white));
		--gm-header-bg: color-mix(in srgb, var(--gm-white) 96%, transparent);
		--gm-orbit-glow: color-mix(in srgb, var(--gm-brand) 6%, var(--gm-white));
		--gm-orbit-ground: color-mix(in srgb, var(--gm-brand) 15%, var(--gm-white));
		--gm-orbit-grid: color-mix(in srgb, var(--gm-brand) 17%, transparent);
		--gm-orbit-ring: color-mix(in srgb, var(--gm-brand) 24%, transparent);
		--gm-orbit-ring-soft: color-mix(in srgb, var(--gm-brand) 16%, transparent);
		--gm-orbit-shadow: color-mix(in srgb, var(--gm-brand) 22%, transparent);
		--gm-place-line: color-mix(in srgb, var(--gm-brand) 9%, transparent);
		--gm-place-halo: color-mix(in srgb, var(--gm-brand) 13%, transparent);
		--gm-shadow-header: 0 6px 24px color-mix(in srgb, var(--gm-night) 7%, transparent);
		--gm-shadow-menu: 0 20px 25px color-mix(in srgb, var(--gm-night) 7%, transparent);
	}
}

@media (max-width: 800px) {
	:root {
		--gm-header-h: 80px;
	}
}