/* ============================================================================ MEEC — Token di design ---------------------------------------------------------------------------- QUESTO FILE NON CONTIENE VALORI. Mappa i nomi usati dal CSS del tema (--meec-*) sulle variabili che WordPress genera da theme.json (--wp--preset--*, --wp--custom--*). Stessa struttura del Figma "Master MEEC" (pagina Design System, 11/09/2026): theme.json settings.custom.colore = collezione "Primitivi" questo file, sezione "Semantici" = collezione "Tokens" Un colore si cambia in theme.json; qui si cambia solo QUALE primitivo svolge un ruolo (es. il fondo del bottone primario). Vedi docs/2026-09-11_token-da-figma.md ============================================================================ */ :root{ /* --- Semantici: testo (Figma: Tokens / Text) --------------------------- */ --meec-testo-primario: var(--wp--preset--color--testo); /* Base/Nero */ --meec-testo-secondario: var(--wp--preset--color--testo-secondario); /* Neutri/700 */ --meec-testo-accento: var(--wp--preset--color--accent); /* Accent/600 */ --meec-testo-hover: var(--wp--custom--colore--accent--700); /* Accent/700 */ --meec-testo-invertito: var(--wp--preset--color--sfondo); /* Base/Bianco */ /* --- Semantici: superfici (Figma: Tokens / Surface) -------------------- */ --meec-sup-bottone-primario: var(--wp--preset--color--accent); --meec-sup-bottone-primario-hover: var(--wp--custom--colore--accent--700); --meec-sup-bottone-disabilitato: var(--wp--custom--colore--neutri--200); --meec-sup-bottone-secondario: var(--wp--preset--color--sfondo); --meec-sup-bottone-secondario-hover: var(--wp--preset--color--accent-tenue); --meec-sup-chip: var(--wp--custom--colore--neutri--100); --meec-sup-chip-hover: var(--wp--preset--color--sfondo); --meec-sup-chip-attivo: var(--wp--preset--color--accent-tenue); --meec-sup-sezione-bianca: var(--wp--preset--color--sfondo); --meec-sup-sezione-grigia: var(--wp--preset--color--sfondo-tenue); --meec-sup-sezione-rosa: var(--wp--preset--color--accent-tenue); --meec-sup-sezione-verde: var(--wp--preset--color--primario-tenue); --meec-sup-sezione-verde-scura: var(--wp--preset--color--foresta); /* Piede e fasce scure hanno lo stesso verde (26/09/2026): Brand/Dark/950 #14251A, quello a cui il master component definitivo del piede e' legato nel Design System. Il token resta separato perche' il piede e' l'unico posto in cui potrebbe tornare a scostarsi. */ --meec-sup-piede: var(--wp--preset--color--foresta); /* Il verde scuro in canali separati, per le velature: rgb(...) con trasparenza vuole i numeri, e da un colore preset non si ricavano. Deve restare allineato a --wp--preset--color--foresta (theme.json). */ --meec-verde-scuro-canali: var(--wp--custom--colore--foresta-canali); /* --- Semantici: bordi (Figma: Tokens / Border) ------------------------- */ --meec-bordo-primario: var(--wp--preset--color--accent); /* Accent/600 */ --meec-bordo-secondario: var(--wp--custom--colore--accent--200); /* Accent/200 */ --meec-bordo-terziario: var(--wp--preset--color--bordo); /* Neutri/200 */ /* --- Identita' e stati ----------------------------------------------- */ --meec-verde: var(--wp--preset--color--primario); /* Brand/Dark/500 */ /* Verde scuro = Brand/Dark/950 #14251A, deciso da Mariano il 26/09/2026: e' la Variable a cui e' legato il piede definitivo del Design System. Sostituisce il #0F3315 libero delle schermate (scelto il 14/09), che nel design system non esiste. Colore in theme.json (preset «foresta» e «foresta-canali», da tenere allineati). */ --meec-verde-scuro: var(--wp--preset--color--foresta); --meec-gradiente-verde: linear-gradient(135deg, var(--wp--custom--colore--gradiente--inizio), var(--wp--custom--colore--gradiente--fine)); --meec-errore: var(--wp--preset--color--errore); --meec-errore-sfondo: var(--wp--custom--colore--errore--50); --meec-successo: var(--wp--preset--color--successo); --meec-successo-sfondo: var(--wp--custom--colore--successo--50); --meec-avviso: var(--wp--preset--color--avviso); --meec-avviso-sfondo: var(--wp--custom--colore--avviso--100); --meec-info: var(--wp--preset--color--info); --meec-info-sfondo: var(--wp--custom--colore--info--50); /* --- Tipografia ------------------------------------------------------- */ --meec-font-titoli: var(--wp--preset--font-family--titoli); --meec-font-testo: var(--wp--preset--font-family--testo); --meec-testo-sm: var(--wp--preset--font-size--sm); --meec-corpo: var(--wp--preset--font-size--md); --meec-testo-lg: var(--wp--preset--font-size--lg); --meec-testo-xl: var(--wp--preset--font-size--xl); --meec-titolo-s: var(--wp--preset--font-size--titolo-s); --meec-display-s: var(--wp--preset--font-size--display-sm); /* Display/sm 30 */ --meec-titolo-m: var(--wp--preset--font-size--titolo-m); --meec-titolo-l: var(--wp--preset--font-size--titolo-l); --meec-display: var(--wp--preset--font-size--display); --meec-interlinea: var(--wp--custom--interlinea--corpo); --meec-interlinea-titoli: var(--wp--custom--interlinea--titoli); --meec-interlinea-display: var(--wp--custom--interlinea--display); /* --- Spazi: stessi nomi di Figma (Spacing/0 ... Spacing/15) ----------- */ --meec-sp-0: var(--wp--preset--spacing--0); /* 2px */ --meec-sp-1: var(--wp--preset--spacing--1); /* 4px */ --meec-sp-2: var(--wp--preset--spacing--2); /* 8px */ --meec-sp-3: var(--wp--preset--spacing--3); /* 16px */ --meec-sp-4: var(--wp--preset--spacing--4); /* 24px */ --meec-sp-5: var(--wp--preset--spacing--5); /* 32px */ --meec-sp-6: var(--wp--preset--spacing--6); /* 40px */ --meec-sp-7: var(--wp--preset--spacing--7); /* 48px */ --meec-sp-8: var(--wp--preset--spacing--8); /* 56px */ --meec-sp-9: var(--wp--preset--spacing--9); /* 64px */ --meec-sp-10: var(--wp--preset--spacing--10); /* 72px */ --meec-sp-11: var(--wp--preset--spacing--11); /* 80px */ --meec-sp-12: var(--wp--preset--spacing--12); /* 88px */ --meec-sp-13: var(--wp--preset--spacing--13); /* 96px */ --meec-sp-14: var(--wp--preset--spacing--14); /* 104px */ --meec-sp-15: var(--wp--preset--spacing--15); /* 112px */ /* --- Forme ------------------------------------------------------------ */ --meec-raggio-xs: var(--wp--custom--raggio--xs); --meec-raggio-sm: var(--wp--custom--raggio--sm); --meec-raggio-l: var(--wp--custom--raggio--l); --meec-raggio-xl: var(--wp--custom--raggio--xl); --meec-raggio-xxl: var(--wp--custom--raggio--xxl); --meec-raggio-pillola: var(--wp--custom--raggio--pillola); --meec-ombra-xs: var(--wp--preset--shadow--xs); --meec-ombra-sm: var(--wp--preset--shadow--sm); --meec-ombra-md: var(--wp--preset--shadow--md); --meec-ombra-lg: var(--wp--preset--shadow--lg); --meec-ombra-xl: var(--wp--preset--shadow--xl); --meec-ombra-2xl: var(--wp--preset--shadow--2xl); /* --- Impaginazione ---------------------------------------------------- */ --meec-contenitore: var(--wp--custom--contenitore); /* 1296px: sezioni Figma a 1440 con 72px di lato */ --meec-margine: var(--wp--custom--margine-laterale); /* 16px a 393 -> 72px a 1440 */ --meec-sezione: var(--wp--custom--sezione); /* 64px a 393 -> 96px a 1440 */ --meec-testata-h: var(--wp--custom--testata--altezza); /* compatta 76 */ --meec-testata-h-mobile: var(--wp--custom--testata--altezza-mobile); /* Intestazione estesa (Figma Design System, «Header» Expanded 1440x157, riquadro «Nuovo» del 25/09/2026): riga alta 93 (padding 24 + marchi 38 + 24 + il filo di separazione) + riga di navigazione 64. */ --meec-testata-h-estesa: var(--wp--custom--testata--altezza-estesa); --meec-testata-riga-alta: var(--wp--custom--testata--riga-alta); --meec-testata-riga-nav: var(--wp--custom--testata--riga-nav); --meec-durata: var(--wp--custom--durata); /* --- Movimento --------------------------------------------------------- Aperture e chiusure dei pannelli. La chiusura e' piu' breve: uscire deve costare meno che entrare. La curva parte decisa e si posa, senza rimbalzo. */ --meec-durata-apertura: 380ms; --meec-durata-chiusura: 300ms; --meec-curva: cubic-bezier(.22, 1, .36, 1); /* In chiusura la stessa curva sarebbe quasi tutta nei primi 80ms: sembrerebbe di nuovo uno scatto. Qui serve simmetrica, che parte e si posa piano. */ --meec-curva-uscita: cubic-bezier(.55, 0, .45, 1); /* --- Alias storici ------------------------------------------------------ Nomi usati dai plugin MEEC (con valore di ripiego nel loro CSS) e dalle prime versioni del tema. Non usarli nel codice nuovo. */ --meec-colore-primario: var(--meec-verde); --meec-colore-primario-scuro: var(--wp--custom--colore--brand-dark--700); --meec-colore-accento: var(--meec-testo-accento); --meec-colore-testo: var(--meec-testo-primario); --meec-colore-testo-tenue: var(--meec-testo-secondario); --meec-colore-bordo: var(--meec-bordo-terziario); --meec-colore-sfondo: var(--meec-sup-sezione-bianca); --meec-colore-sfondo-tenue: var(--meec-sup-sezione-grigia); --meec-colore-errore: var(--meec-errore); --meec-colore-ok: var(--meec-successo); --meec-colore-avviso: var(--meec-avviso); --meec-raggio: var(--meec-raggio-sm); --meec-ombra: var(--meec-ombra-md); --meec-larghezza-contenuto: var(--meec-contenitore); }