/* ============================================================
   GRC Typography System
   Fonte di verità per font-size in tutta la FE.
   Include sistema responsive: i token cambiano automaticamente
   sui breakpoint MudBlazor (xs/sm/md/lg/xl).
   NON inserire font-size hardcoded nei componenti: usare le var.
   ============================================================ */

/* ---------- BASELINE (desktop lg, 1280px+) ---------- */
:root {
	/* Scala (modular 1.125, base 14px = 0.875rem) */
	--grc-fs-xxs:  0.6875rem;   /* 11px */
	--grc-fs-xs:   0.75rem;     /* 12px */
	--grc-fs-sm:   0.8125rem;   /* 13px */
	--grc-fs-base: 0.875rem;    /* 14px */
	--grc-fs-md:   1rem;        /* 16px */
	--grc-fs-lg:   1.125rem;    /* 18px */
	--grc-fs-xl:   1.25rem;     /* 20px */
	--grc-fs-2xl:  1.5rem;      /* 24px */
	--grc-fs-3xl:  2rem;        /* 32px */

	/* Line heights */
	--grc-lh-tight:   1.2;
	--grc-lh-normal:  1.45;
	--grc-lh-relaxed: 1.6;

	/* Font weights */
	--grc-fw-regular: 400;
	--grc-fw-medium:  500;
	--grc-fw-bold:    700;

	/* ---------- Alias semantici (USARE QUESTI nei componenti) ---------- */
	/* Menu — scala prominente: root più grande del body per dare peso alla navigazione */
	--grc-fs-menu-root:     var(--grc-fs-md);     /* 16px */
	--grc-fs-menu-group:    var(--grc-fs-base);   /* 14px */
	--grc-fs-menu-child:    var(--grc-fs-sm);     /* 13px */

	/* Body */
	--grc-fs-body:          var(--grc-fs-base);
	--grc-fs-caption:       var(--grc-fs-xs);
	--grc-fs-badge:         var(--grc-fs-xxs);

	/* Datagrid */
	--grc-fs-grid-header:   var(--grc-fs-sm);
	--grc-fs-grid-cell:     var(--grc-fs-sm);

	/* ---------- Titoli FLUID (clamp) ---------- */
	/* Scalano linearmente tra mobile e 4K, capped ai limiti. */
	--grc-fs-card-title:    clamp(1rem,     0.9rem + 0.3vw, 1.125rem);   /* 16 → 18 */
	--grc-fs-section-title: clamp(1.125rem, 1rem + 0.4vw,   1.375rem);   /* 18 → 22 */
	--grc-fs-page-title:    clamp(1.25rem,  1rem + 1vw,     1.75rem);    /* 20 → 28 */
	--grc-fs-hero:          clamp(1.5rem,   1.2rem + 1.5vw, 2.5rem);     /* 24 → 40 */
}

/* ---------- xs: mobile portrait (≤599px) ---------- */
@media (max-width: 599.98px) {
	:root {
		--grc-fs-xxs:  0.6875rem;  /* 11 stabile (leggibilità) */
		--grc-fs-xs:   0.75rem;    /* 12 stabile */
		--grc-fs-sm:   0.75rem;    /* 12 (era 13) */
		--grc-fs-base: 0.8125rem;  /* 13 (era 14) */
		--grc-fs-md:   0.9375rem;  /* 15 (era 16) */
		--grc-fs-lg:   1rem;       /* 16 (era 18) */
		--grc-fs-xl:   1.125rem;   /* 18 (era 20) */
		--grc-fs-2xl:  1.25rem;    /* 20 (era 24) */
		--grc-fs-3xl:  1.5rem;     /* 24 (era 32) */
	}
}

/* ---------- sm: mobile landscape / tablet portrait (600-959) ---------- */
@media (min-width: 600px) and (max-width: 959.98px) {
	:root {
		--grc-fs-sm:   0.75rem;    /* 12 (era 13) */
		--grc-fs-base: 0.8125rem;  /* 13 (era 14) */
	}
}

/* ---------- md: tablet landscape / laptop (960-1279) ---------- */
@media (min-width: 960px) and (max-width: 1279.98px) {
	:root {
		--grc-fs-sm:   0.75rem;    /* 12 (era 13) */
	}
}

/* ---------- lg: desktop standard (1280-1919) = baseline, nessun override ---------- */

/* ---------- xl: monitor grandi / 4K (≥1920) ---------- */
@media (min-width: 1920px) {
	:root {
		--grc-fs-xxs:  0.75rem;    /* 12 (era 11) */
		--grc-fs-xs:   0.8125rem;  /* 13 (era 12) */
		--grc-fs-sm:   0.875rem;   /* 14 (era 13) */
		--grc-fs-base: 0.9375rem;  /* 15 (era 14) */
		--grc-fs-md:   1.0625rem;  /* 17 (era 16) */
		--grc-fs-lg:   1.1875rem;  /* 19 (era 18) */
		--grc-fs-xl:   1.3125rem;  /* 21 (era 20) */
		--grc-fs-2xl:  1.625rem;   /* 26 (era 24) */
		--grc-fs-3xl:  2.25rem;    /* 36 (era 32) */
	}
}

/* ---------- Density modifier (opt-in via attributo su container) ---------- */
/* Uso: <div data-grc-density="compact"> ... datagrid denso ... </div> */
[data-grc-density="compact"] {
	--grc-fs-grid-header: var(--grc-fs-xs);
	--grc-fs-grid-cell:   var(--grc-fs-xs);
	--grc-fs-body:        var(--grc-fs-sm);
}

[data-grc-density="comfortable"] {
	--grc-fs-grid-header: var(--grc-fs-base);
	--grc-fs-grid-cell:   var(--grc-fs-base);
	--grc-fs-body:        var(--grc-fs-md);
}

/* ---------- Classi utility per markup non-Mud ---------- */
.grc-text-xxs  { font-size: var(--grc-fs-xxs); }
.grc-text-xs   { font-size: var(--grc-fs-xs); }
.grc-text-sm   { font-size: var(--grc-fs-sm); }
.grc-text-base { font-size: var(--grc-fs-base); }
.grc-text-md   { font-size: var(--grc-fs-md); }
.grc-text-lg   { font-size: var(--grc-fs-lg); }
.grc-text-xl   { font-size: var(--grc-fs-xl); }
.grc-text-2xl  { font-size: var(--grc-fs-2xl); }
.grc-text-3xl  { font-size: var(--grc-fs-3xl); }