/* =============================================================================
FooLab — DESIGN TOKENS (attività 1.1, prerequisito della component library 1.2)
-----------------------------------------------------------------------------
Unica fonte di verità per colori, tipografia, spaziature, raggi, bordi e ombre
dello stile cartoon FooLab (estratto da public/assets/foolab/foolab.css e dai
pattern di public/dibattito.html).
REGOLA: nessun componente FooLab deve contenere valori hardcoded — sempre
var(--fl-*). Questo file va caricato PRIMA di foolab.css e foolab-ui.css.
SORGENTE / BUILD
----------------
Questo file è la SORGENTE (resources/css/foolab-tokens.css). Il build lo
copia in public/assets/foolab/foolab-tokens.css — vedi webpack.mix.js:
.copy('resources/css/foolab-tokens.css',
'public/assets/foolab/foolab-tokens.css')
Rigenera con `npm run production` (Laravel Mix; il repo NON usa Vite per
questi asset: public/build non viene prodotto). NON modificare a mano il
file in public/: viene sovrascritto al build successivo.
FONT
----
Baloo 2 (display/heading) + Fredoka (testo) sono caricati via a
Google Fonts nel layout — resources/views/layouts/foolab.blade.php e
resources/views/admin/foolab/component-library.blade.php:
https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700
&family=Baloo+2:wght@500;700;800&display=swap
Qui NON facciamo @import per non duplicare la richiesta (l'@import è anche
render-blocking e serializza il download rispetto al in ):
esponiamo solo i token --fl-font-body / --fl-font-display / --fl-font-mono.
Il mono (JetBrains Mono) non è caricato da Google Fonts: cade sui fallback
di sistema (ui-monospace/Menlo), voluto — serve solo per editor e console.
========================================================================== */
:root{
/* ---- Colori di marca ---------------------------------------------------
REVISIONE 2026-07 — «base bianco e nero, accenti smorzati ma vivi».
Due passaggi: prima da satura/digitale (blu #2f80ff, giallo #ffd23f) a
vintage desaturata (petrolio, senape, salvia); quella però era troppo
spenta e datata. La taratura finale sta in mezzo: colori riconoscibili e
moderni, un gradino sotto la saturazione piena. Regole invariate:
- la BASE è bianco/nero/carta: è quella che porta la pagina;
- il COLORE è un accento, usato per distinguere, mai per decorare;
- niente gradienti: superfici sempre piatte.
I NOMI dei token restano quelli storici (--fl-blue, --fl-yellow, …) così
tutte le pagine già costruite si adeguano da sole: cambia il valore, non
l'impianto. Il nome indica il RUOLO, non più la tinta letterale.
-------------------------------------------------------------------- */
--fl-bg:#f4f4f2; /* sfondo pagina — carta neutra */
--fl-ink:#141414; /* testo / linee — nero */
--fl-blue:#1f6feb; /* accento primario — blu */
--fl-blue-d:#1552b8; /* accento primario scuro */
--fl-pink:#e2557f; /* editoriale */
--fl-yellow:#f5b921; /* ambra — evidenza e sticker */
--fl-green:#18a06a; /* verde — stato positivo */
--fl-red:#e04b32; /* rosso — errore, verdetto negativo */
--fl-orange:#f08a2a; /* arancio — opinione */
--fl-purple:#8a5cd6; /* viola — filosofia */
--fl-neutral:#8a8a86; /* semaforo "neutro" */
--fl-panel:#ffffff; /* superficie card/pannelli */
--fl-line:#1a1a1a; /* colore bordo */
/* Testo "on-color" (contrasto sui fondi pieni). Gli accenti desaturati sono
scuri: sopra ci va bianco, non più una tinta scura della stessa famiglia. */
--fl-on-blue:#ffffff;
--fl-on-green:#ffffff;
--fl-on-yellow:var(--fl-ink);
--fl-on-red:#ffffff;
--fl-on-dark:#f2efe9;
/* Tinte tenui (fondi di box/pill tipizzati) — la tinta si riconosce, ma resta
un fondo: mai un colore che compete col testo che ci sta sopra. */
--fl-tint-green:#e4f2ea;
--fl-tint-yellow:#fbf0d5;
--fl-tint-blue:#e5edf8;
--fl-tint-purple:#eee9f7;
--fl-tint-orange:#fceee0;
--fl-tint-red:#fae5e1;
--fl-tint-grey:#f0f0ee;
--fl-tint-hint:#fbf0d5; /* box suggerimento */
/* ---- Semantica: semaforo / verdetti ----------------------------------- */
--fl-verdict-ok:var(--fl-green); /* fondato */
--fl-verdict-warn:var(--fl-yellow); /* parziale */
--fl-verdict-ko:var(--fl-red); /* infondato */
--fl-verdict-neutral:var(--fl-neutral);/* opinione / filosofia */
/* ---- Semantica: box tipizzati ----------------------------------------- */
--fl-kind-fatto:var(--fl-green);
--fl-kind-fatto-bg:var(--fl-tint-green);
--fl-kind-opinione:var(--fl-orange);
--fl-kind-opinione-bg:var(--fl-tint-yellow);
--fl-kind-filosofia:var(--fl-purple);
--fl-kind-filosofia-bg:var(--fl-tint-purple);
--fl-kind-metodo:var(--fl-blue-d);
--fl-kind-metodo-bg:var(--fl-tint-blue);
/* ---- Superfici scure (console, board, chiusure) ------------------------ */
--fl-surface-dark:#141414;
--fl-surface-code:#0d0d0d;
--fl-code-ink:#f2efe9;
/* ---- Tipografia -------------------------------------------------------- */
--fl-font-body:'Fredoka',system-ui,sans-serif;
--fl-font-display:'Baloo 2',cursive;
--fl-font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
/* Font STORICO del marchio: "{F}", la parola "Footility" e il titolo hero
devono restare in Kg Happy — è l'unico elemento di identità che precede
il restyle e non va sostituito dal font display. @font-face in
foolab-chrome.css (il sito lo dichiara anche in app.css come .foo-font). */
--fl-font-brand:'Kg Happy',cursive;
/* Kg Happy esiste in UN SOLO peso. Se gli si chiede il bold, il browser
sintetizza il grassetto ingrossando i contorni: a dimensione grande il
marchio diventa sporco e illeggibile. Ovunque si usi --fl-font-brand va
usato ANCHE questo peso — mai --fl-fw-bold/black. */
--fl-fw-brand:400;
--fl-fs-xs:.8rem;
--fl-fs-sm:.92rem;
--fl-fs-md:1.05rem;
--fl-fs-lg:1.2rem;
--fl-fs-xl:1.5rem;
--fl-fs-display:clamp(2rem,5vw,3.4rem);
--fl-fw-regular:500;
--fl-fw-bold:700;
--fl-fw-black:800;
--fl-lh-tight:1.15;
--fl-lh-base:1.55;
/* ---- Spaziature (scala 4px) -------------------------------------------- */
--fl-space-1:.25rem;
--fl-space-2:.5rem;
--fl-space-3:.8rem;
--fl-space-4:1.1rem;
--fl-space-5:1.6rem;
--fl-space-6:2.4rem;
/* ---- Bordi e raggi ------------------------------------------------------
Alleggeriti nella revisione 2026-07: 4/3/2px erano la firma "cartoon".
Con la palette piatta il segno nero regge benissimo a 3/2/1px e il tono
passa da fumetto a stampa vintage. */
--fl-border-w:3px; /* bordo pieno */
--fl-border-w-sm:2px;
--fl-border-w-xs:1px;
--fl-border:var(--fl-border-w) solid var(--fl-line);
--fl-border-sm:var(--fl-border-w-sm) solid var(--fl-line);
--fl-border-xs:var(--fl-border-w-xs) solid var(--fl-line);
/* Tratteggi — separano senza "chiudere": si usano DENTRO i contenuti (tra
sezioni, sopra la piedina di una card, tra le voci di un elenco), mentre
il bordo pieno resta il perimetro degli oggetti. La distinzione è la
regola: se tratteggio e bordo pieno finiscono adiacenti, si legge come un
doppio bordo. */
--fl-dash:var(--fl-border-w-sm) dashed var(--fl-line);
--fl-dash-sm:var(--fl-border-w-xs) dashed var(--fl-line);
--fl-dash-soft:var(--fl-border-w-xs) dashed rgba(20,20,20,.28);
--fl-radius-sm:12px;
--fl-radius-md:16px;
--fl-radius-lg:20px;
--fl-radius-xl:26px;
--fl-radius-pill:999px;
/* ---- Ombre dure (piatte, mai sfumate) ----------------------------------
Ridotte con i bordi: l'ombra resta il segno che dà profondità, ma non
deve più "staccare" la card di mezzo centimetro. */
--fl-shadow-sm:0 2px 0 var(--fl-line);
--fl-shadow:0 4px 0 var(--fl-line);
--fl-shadow-pressed:0 1px 0 var(--fl-line);
--fl-press-y:3px; /* di quanto "affonda" un bottone :active */
/* ---- Layout ------------------------------------------------------------- */
--fl-container:1080px;
--fl-container-wide:1280px;
/* ---- Motion -------------------------------------------------------------*/
--fl-transition:transform .06s ease, box-shadow .06s ease;
/* =========================================================================
ESTENSIONE — ritmo verticale e scala tipografica di pagina (rev. home/CV)
-------------------------------------------------------------------------
SOLO AGGIUNTE: nessun token preesistente è stato ridefinito, così le
pagine già costruite (dibattito, corso, styleguide) restano identiche.
Servono a dare "aria" alle pagine lunghe: la scala 1-6 è pensata per il
dentro-componente, questa 7-9 per lo stacco tra sezioni.
====================================================================== */
/* Spaziature di pagina (stacco tra sezioni, non dentro le card) */
--fl-space-7:3.5rem;
--fl-space-8:5rem;
--fl-space-9:7rem;
/* Scala tipografica fluida per titoli di pagina/sezione */
--fl-fs-hero:clamp(3.2rem,9vw,7rem); /* titolo hero = il marchio */
--fl-fs-h2:clamp(1.7rem,3.2vw,2.5rem); /* titolo di sezione */
--fl-fs-h3:clamp(1.15rem,1.8vw,1.45rem); /* titolo di card */
--fl-fs-lead:clamp(1.05rem,1.35vw,1.2rem); /* paragrafo introduttivo */
--fl-lh-lead:1.65; /* respiro sui testi lunghi */
--fl-measure:62ch; /* larghezza di lettura ideale*/
/* Ombra più profonda per gli elementi "grandi" (hero, band, nav) */
--fl-shadow-lg:0 6px 0 var(--fl-line);
--fl-shadow-hover:0 6px 0 var(--fl-line);
/* Sporgenza dell'icona flottante sul bordo della card (vedi .flc-card--float).
Le griglie che ospitano card flottanti devono avere gap >= 2x questo valore,
altrimenti le icone di due card adiacenti si toccano. */
--fl-float-size:54px;
--fl-float-out:24px;
/* Contenitore extra-large per le pagine a piena larghezza */
--fl-container-full:1440px;
/* Altezza della barra di navigazione FooLab (per gli offset di scroll) */
--fl-nav-h:74px;
}