/*
 * Studio Arfia — tokens.css · v0.1.0 · 17/08/2026
 * Alias semantici dei token theme.json (--wp--preset--*) + scala raggi,
 * curve motion C10, focus, layout. I file di pagina CONSUMANO questi token,
 * mai valori nudi (playbook §8.1). Prefisso --as- ovunque.
 */

/* ── Font: Archivo variabile self-hosted (DS §1) ─────────────────────── */
/* theme.json dichiara i fontFace; queste due regole sono la rete di
   sicurezza se WP non li stampasse (tema classico: li stampa, ma il font
   è contenuto — la ridondanza costa zero, il font mancante costa tutto). */
@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo/archivo-variable-normal-latin.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Archivo';
	src: url('../fonts/archivo/archivo-variable-italic-latin.woff2') format('woff2');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

:root {
	/* ── Palette (DS §2 — la Sintesi; arancio #F37022 PROVVISORIO 16/08) ── */
	--as-bianco:        var(--wp--preset--color--bianco, #FFFFFF);
	--as-superficie:    var(--wp--preset--color--superficie, #F5F5F5);
	--as-filo:          var(--wp--preset--color--filo, #E8E8E8);
	--as-carbone:       var(--wp--preset--color--carbone, #0A0A0A);
	--as-superficie-c:  var(--wp--preset--color--superficie-carbone, #141414);
	--as-filo-c:        var(--wp--preset--color--filo-carbone, #262626);
	--as-arancio:       var(--wp--preset--color--arancio, #F37022);
	--as-arancio-attivo:var(--wp--preset--color--arancio-attivo, #D95E12);
	--as-grigio-display:var(--wp--preset--color--grigio-display, #8C8C8C);
	--as-grigio-testo:  var(--wp--preset--color--grigio-testo, #707070);
	--as-grigio-testo-inv: var(--wp--preset--color--grigio-testo-inverso, #A8A8A8);
	--as-errore:        var(--wp--preset--color--errore, #B3372B);
	--as-successo:      var(--wp--preset--color--successo, #2E7D4F);

	/* Semantici di contesto (i blocchi carbone li ribaltano, v. sotto). */
	--as-bg:    var(--as-bianco);
	--as-ink:   var(--as-carbone);
	--as-sup:   var(--as-superficie);
	--as-line:  var(--as-filo);
	--as-muted: var(--as-grigio-testo);

	/* ── Tipografia (DS §1 — scala fedele alla proposta) ────────────────── */
	--as-font: 'Archivo', system-ui, -apple-system, sans-serif;
	--as-type-display-xl: clamp(72px, 12vw, 200px);
	--as-type-cover:      clamp(64px, 11vw, 180px);
	--as-type-display-lg: clamp(56px, 9vw, 140px);
	--as-type-display-md: clamp(40px, 6vw, 88px);
	--as-type-display-sm: clamp(28px, 4vw, 56px);
	--as-type-lede:       clamp(18px, 1.5vw, 22px);
	--as-type-body:       clamp(15px, 1.1vw, 17px);
	--as-type-meta:       13px;
	--as-type-label:      11px;
	/* Taglia componente (card, righe, accordion): i display restano per i
	   momenti-firma — feedback di Rami 17/08: «i titoli sono enormi». */
	--as-type-card:       clamp(20px, 1.8vw, 30px);

	/* ── Spazio (DS §5 — scala base 4, fitta in basso rada in alto) ─────── */
	--as-sp-1: 4px;  --as-sp-2: 8px;   --as-sp-3: 12px; --as-sp-4: 16px;
	--as-sp-5: 24px; --as-sp-6: 32px;  --as-sp-7: 48px; --as-sp-8: 64px;
	--as-sp-9: 96px; --as-sp-10: 128px;

	/* Layout fluido (DS §5). */
	--as-container: 1440px;
	--as-gutter:    clamp(1.5rem, 6vw, 8rem);   /* respiro demo W&S-06 */
	--as-sect:      clamp(6rem, 14vh, 10rem);   /* ritmo demo: aria vera, su base vh */
	--as-sect-hero: clamp(4rem, 11vw, 10rem);
	--as-gap-cards: clamp(0.75rem, 1.6vw, 1.25rem);
	--as-measure:   66ch;

	/* ── Raggi (DS §6 — QUATTRO valori; interni sempre derivati) ────────── */
	--as-r-s:       8px;
	--as-r-card:    16px;
	--as-r-card-lg: 20px;
	--as-r-pill:    999px;
	/* Squircle: --as-brm moltiplica SOLO dove il nativo esiste (skill §10).
	   La concentricità si calcola DOPO la moltiplicazione (DS §6). */
	--as-brm: 1;

	/* ── Motion — registro C10 (DS §9, misurato sui premiati) ───────────── */
	--as-ease-out:   cubic-bezier(.16, 1, .3, 1);     /* reveal / enter */
	--as-ease-io:    cubic-bezier(.7, 0, .3, 1);      /* va-e-torna: veil, wipe, nav */
	--as-ease-in:    cubic-bezier(.36, 0, .66, 0);    /* uscite / coperture */
	--as-ease-micro: cubic-bezier(.215, .61, .355, 1);/* micro-UI */
	--as-ease-stato: cubic-bezier(.34, 1, .64, 1);    /* enter stati cursore */
	--as-t-micro:  .3s;
	--as-t-azione: .6s;
	--as-t-reveal: 1s;
	--as-t-scenico: 1.6s;
	/* Cursore (DS §11): enter .4 stato / leave .25 in — coppia Snellenberg. */
	--as-cur-enter: .4s;
	--as-cur-leave: .25s;

	/* Header: l'altezza vera la misura il JS (ResizeObserver, playbook §8.4).
	   Questo è solo il valore di partenza prima del primo measure: v0.38, le
	   misure vere (82 sul desktop, 64 sotto i 1080), così la pagina non salta
	   quando arriva il JS. */
	--as-header-h: 82px;
}
@media (max-width: 1080px) {
	:root { --as-header-h: 64px; }
}

/* ── Telefono (≤ 699px): la scala e il ritmo del pollice ──────────────────
   v0.38 (29/09, design/DIREZIONE-MOBILE.md, Rami: «da mobile è tragico»):
   il telefono riceveva i minimi del desktop, cioè titoli da 56-72px e 118px
   di spazio sopra e sotto ogni sezione (236px di vuoto tra due sezioni, un
   terzo di schermo). Qui solo i valori del telefono: dal tablet in su non
   cambia niente. I titoli seguono la larghezza (a 390px i valori della
   direzione; su un SE scendono di poco, su un Pro Max salgono di poco) così
   vanno a capo allo stesso modo su ogni telefono. */
@media (max-width: 699px) {
	:root {
		--as-type-display-xl: clamp(48px, 14.36vw, 60px);  /* 56 a 390 */
		--as-type-cover:      clamp(48px, 14.36vw, 60px);  /* 56 a 390 */
		--as-type-display-lg: clamp(40px, 11.28vw, 48px);  /* 44 a 390 */
		--as-type-display-md: clamp(36px, 10.26vw, 44px);  /* 40 a 390: l'H1 di ogni pagina */
		--as-type-display-sm: clamp(28px, 8.2vw, 34px);    /* 32 a 390: i titoli di sezione piccoli */
		--as-type-body:       16px;                        /* mai sotto i 16 un paragrafo da leggere */
		/* 76px a 844 di altezza, 64 su un SE: tra due sezioni 128-152px in tutto. */
		--as-sect:            clamp(64px, 9vh, 80px);
	}
}

@supports (corner-shape: squircle) {
	:root { --as-brm: 1.8; }
}

/* ── Contesto carbone: i semantici si ribaltano (DS §2) ─────────────────
   Qualunque blocco .as-carbone eredita testi/fili giusti senza tarature. */
.as-carbone {
	--as-bg:    var(--as-carbone);
	--as-ink:   var(--as-bianco);
	--as-sup:   var(--as-superficie-c);
	--as-line:  var(--as-filo-c);
	--as-muted: var(--as-grigio-testo-inv);
	background: var(--as-bg);
	color: var(--as-ink);
}

/* ── Selezione: identica ovunque (DS §2) ───────────────────────────────── */
::selection {
	background: var(--as-carbone);
	color: var(--as-bianco);
}
.as-carbone ::selection,
[data-fondo="carbone"] ::selection {
	background: var(--as-bianco);
	color: var(--as-carbone);
}

/* ── Focus visibile, mai arancio (DS §2 legge 5) ───────────────────────── */
:focus-visible {
	outline: 2px solid var(--as-ink);
	outline-offset: 3px;
}