/*
 * type.css — scala tipografica e componenti condivisi per le pagine hub-ai/.
 * Obiettivo: font più grande e gerarchia più netta su TUTTE le pagine, senza
 * ripetere lo stesso CSS inline in ognuna. La scala nasce da la_risposta.html.
 *
 * Uso in pagina (dopo style.css, prima/insieme a diagram.css):
 *   <link rel="stylesheet" href="https://insegnai.ch/hub-ai/type.css">
 * oppure, in locale, relativo:
 *   <link rel="stylesheet" href="type.css">
 *
 * I token :root qui sono FALLBACK: se la pagina ridefinisce :root inline, vince
 * l'inline (stesso peso, dichiarato dopo). Una pagina nuova può usare solo questo.
 */

:root {
    --bg: #fbf4e2; --bg-warm: #ede4c4; --bg-card: #f8f2de;
    --text-primary: #1A2E35; --text-secondary: #4A5C64; --text-muted: #7A8C94;
    --accent-teal: #00C896; --accent-teal-dark: #00A67A;
    --accent-pink: #FF3769; --accent-pink-dark: #E02858;
    --accent-blue: #0098FF; --accent-blue-dark: #0B74CC;
    --accent-amber: #f59e0b; --accent-amber-dark: #b45309;
    --accent-purple: #8b5cf6; --accent-purple-dark: #5b21b6;
    --accent-grey: #1A2E35; --accent-grey-dark: #122126;
    /* accento "tema" della pagina: ogni pagina lo ridefinisce in :root
       (es. --accent: var(--accent-teal); --accent-dark: var(--accent-teal-dark);).
       Fallback = pink. Lo usano act-badge, metaphor, vbtn, note.surprise. */
    --accent: var(--accent-pink); --accent-dark: var(--accent-pink-dark);
    --font: 'Space Mono', 'Courier New', monospace;
    --emoji-font: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
    --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px;
    --ease: cubic-bezier(.16, 1, .3, 1);

    /* scala tipografica (la fonte unica della verità) */
    --fs-lead: 1.12rem;       --lh-lead: 1.75;
    --fs-body: 1.02rem;       --lh-body: 1.7;
    --fs-block-h: 1.25rem;    /* intestazione di blocco */
    --fs-pname: 1.2rem;       /* nome scheda/parametro */
    --fs-ctx: 1.45rem;        /* riquadro contesto/esempio */
    --fs-note: 1rem;          --lh-note: 1.7;
    --fs-small: .92rem;       /* note secondarie, didascalie */
}

* { box-sizing: border-box; }
body { font-family: var(--font), var(--emoji-font); }

/* contenitore di lettura stretto, per le pagine testuali */
.wrap { max-width: 780px; margin: 0 auto; }

/* ---- testo corrente: più grande e respirante ---- */
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--text-secondary); }
.prose { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-secondary); }
.prose p { margin: 0 0 1.1rem; }
.prose b, .prose strong { color: var(--text-primary); }

/* ---- badge atto/pagina ---- */
.act-badge { display: inline-block; font: 700 .7rem var(--font); text-transform: uppercase; letter-spacing: .1em; background: var(--accent); color: #fff; padding: .45rem 1rem; border-radius: 999px; box-shadow: 3px 3px 0 var(--accent-dark); margin-bottom: 1rem; }

/* ---- citazione/metafora ---- */
.metaphor { background: var(--bg-warm); border-left: 5px solid var(--accent); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 1.2rem 1.4rem; font-style: italic; font-size: 1.05rem; line-height: 1.65; color: var(--text-secondary); margin: 2rem auto; }
.metaphor b { color: var(--accent-dark); font-style: normal; }

/* ---- intestazione di blocco con chip ---- */
.block-h { display: flex; align-items: center; gap: .7rem; margin: 2.75rem 0 1.1rem; font: 700 var(--fs-block-h) var(--font); text-transform: uppercase; letter-spacing: .03em; color: var(--text-primary); }
.block-h .k { flex: 0 0 auto; font: 700 .62rem var(--font); letter-spacing: .08em; background: var(--accent-grey); color: var(--bg); padding: .25rem .6rem; border-radius: 999px; }
.block-intro { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-secondary); margin-bottom: 1.25rem; }

/* ---- schede a bordo colorato (parametri, concetti) ---- */
.params { display: flex; flex-direction: column; gap: 1rem; }
.param { background: var(--bg-card); border: 2px solid rgba(26, 46, 53, .1); border-left-width: 7px; border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 1.2rem 1.4rem; }
.param .pname { font: 700 var(--fs-pname) var(--font); display: flex; align-items: baseline; gap: .6rem; margin-bottom: .5rem; }
.param .pname small { font-size: .82rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; }
.param p { font-size: var(--fs-body); line-height: 1.65; color: var(--text-secondary); margin: 0; }
.param .ends { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: .8rem; font-size: var(--fs-small); }
.param .ends b { font-weight: 700; }
/* varianti colore (riusa le accent del sito) */
.param.temp,   .param.pink   { border-left-color: var(--accent-pink); }
.param.temp .pname,   .param.pink .pname   { color: var(--accent-pink-dark); }
.param.topk,   .param.blue   { border-left-color: var(--accent-blue); }
.param.topk .pname,   .param.blue .pname   { color: var(--accent-blue-dark); }
.param.topp,   .param.teal   { border-left-color: var(--accent-teal); }
.param.topp .pname,   .param.teal .pname   { color: var(--accent-teal-dark); }
.param.amber  { border-left-color: var(--accent-amber); }
.param.amber .pname  { color: var(--accent-amber-dark); }
.param.purple { border-left-color: var(--accent-purple); }
.param.purple .pname { color: var(--accent-purple-dark); }

/* ---- card voxel (contenitore interattivo) ---- */
.card { background: var(--bg-card); border: 2px solid rgba(26, 46, 53, .1); border-radius: var(--radius-lg); box-shadow: 4px 4px 0 rgba(0, 0, 0, .12); padding: 1.9rem; }

/* ---- riquadro contesto/esempio (frase, prompt) ---- */
.ctx { background: var(--bg); border: 2px solid var(--text-primary); border-radius: var(--radius-md); box-shadow: inset 0 4px 10px rgba(0, 0, 0, .05); padding: 1rem 1.25rem; font-size: var(--fs-ctx); font-weight: 700; margin-bottom: 1.5rem; }
.ctx .ph { color: var(--accent-pink); }

/* ---- bottone voxel ---- */
.vbtn { display: inline-flex; align-items: center; gap: .5rem; font: 700 .85rem var(--font); text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--accent); border: none; border-radius: var(--radius-sm); padding: .85rem 1.5rem; cursor: pointer; box-shadow: 4px 4px 0 var(--accent-dark); transition: all 200ms var(--ease); }
.vbtn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--accent-dark); }
.vbtn.teal { background: var(--accent-teal); box-shadow: 4px 4px 0 var(--accent-teal-dark); }
.vbtn.teal:hover { box-shadow: 6px 6px 0 var(--accent-teal-dark); }
.vbtn.blue { background: var(--accent-blue); box-shadow: 4px 4px 0 var(--accent-blue-dark); }
.vbtn.blue:hover { box-shadow: 6px 6px 0 var(--accent-blue-dark); }

/* ---- note / didascalie ---- */
.note { font-size: var(--fs-note); line-height: var(--lh-note); margin-top: 1.6rem; }
.note.surprise { background: var(--bg-card); border: 2px solid var(--accent); border-radius: var(--radius-md); padding: 1.2rem 1.4rem; color: var(--text-primary); }
.note.surprise b { color: var(--accent-dark); }
.note strong { color: var(--accent-dark); }
.note.honest { color: var(--text-muted); font-style: italic; font-size: var(--fs-small); }
.cap { font-size: .98rem; color: var(--text-secondary); margin-top: 1.1rem; line-height: 1.6; }
.cap b { color: var(--text-primary); }

/* ---- reveal-on-scroll condiviso ---- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }