/*
 * Babajaga V2 — fondazioni v0.1
 *
 * Stato: attivo nel perimetro homepage H01.
 * Ambito: qualsiasi radice con data-babajaga-tema="v2".
 *
 * Durante la migrazione questo file resta isolato dal design system legacy.
 * I token approvati vengono estesi un componente alla volta.
 * I parametri usati da un solo componente restano nel relativo foglio CSS;
 * qui entrano soltanto primitive e contratti condivisi.
 */

:where(body.pagina-home-v2, [data-babajaga-tema="v2"]) {
    /*
     * LIVELLO 1 — primitive cromatiche Cold Signal.
     * Qui vivono soltanto valori fisici; sezioni e componenti consumano i
     * ruoli semantici dichiarati nel livello successivo.
     */
    --colore-nero-profondo: #050507;
    --colore-bianco-assoluto: #fff;
    --colore-carta-fredda: #f1f0ec;
    --colore-carta-luminosa: #f8f7f4;
    --colore-grafite: #29282f;
    --colore-supporto-immagine: #dedde2;
    --colore-testo-secondario-base: #b8b7bd;
    --colore-viola-elettrico: #7257ff;
    --colore-magenta-profondo: #9b285e;
    --colore-blu-segnale: #3c66ff;
    --colore-viola-segnale: #9c82ff;
    --colore-magenta-segnale: #ff2b9c;
    --colore-rosa-segnale: #f05bd0;
    --colore-viola-focus: #a99cff;
    --colore-ghiaccio-minerale: #e8eff1;
    --colore-citrino-latteo: #f0efd9;
    --colore-argilla-rosa: #eadbd7;
    --colore-lavanda-fumo: #e4dfeb;
    --colore-maschera-opaca: #000;
    --colore-maschera-morbida: rgb(0 0 0 / 72%);

    /* LIVELLO 2 — ruoli semantici condivisi. */
    --colore-superficie: var(--colore-nero-profondo);
    --colore-testo: var(--colore-carta-fredda);
    --colore-testo-secondario: var(--colore-testo-secondario-base);
    --colore-linea: rgb(241 240 236 / 6%);
    --colore-linea-su-carta: rgb(5 5 7 / 8%);
    --colore-accento: var(--colore-viola-elettrico);
    --colore-accento-profondo: var(--colore-magenta-profondo);
    --colore-focus: var(--colore-viola-focus);
    --colore-lente-viewport-ombra: rgb(5 5 7 / 18%);
    --colore-lente-viewport-velo: rgb(5 5 7 / 7%);

    /* LIVELLO 3 — contratti cromatici dei componenti homepage. */
    --colore-wordmark-hero: var(--colore-bianco-assoluto);
    --colore-display-su-scuro: var(--colore-wordmark-hero);
    --colore-display-su-carta: var(--colore-nero-profondo);
    --colore-impulso-blu: var(--colore-blu-segnale);
    --colore-impulso-viola: var(--colore-viola-segnale);
    --colore-impulso-magenta: var(--colore-magenta-segnale);

    /* Tipografia — Archivo e' caricato per la homepage; Blocksy resta separato. */
    --famiglia-display: "Archivo", "Arial Narrow", Arial, sans-serif;
    --famiglia-corpo: "Archivo", Arial, sans-serif;

    --peso-regolare: 400;
    --peso-medio: 500;

    /* Voce editoriale condivisa da titoli progetto, link e lista servizi. */
    --allungamento-editoriale: 98%;
    --asse-larghezza-editoriale: 98;
    --peso-editoriale-forte: 620;
    --tracciamento-editoriale: -0.025em;

    /*
     * Titolo di capitolo: ponte gerarchico tra i display monumentali e il
     * contenuto. Condiviso da progetti homepage, archivio e singolo progetto.
     */
    --dimensione-titolo-capitolo: clamp(2.75rem, 1.75rem + 4.6vw, 6.5rem);
    --dimensione-titolo-capitolo-viewport-basso: clamp(
        2.5rem,
        1.75rem + 3.2vw,
        4.5rem
    );
    --allungamento-titolo-capitolo: 74%;
    --asse-larghezza-titolo-capitolo: 74;
    --peso-titolo-capitolo: 710;
    --interlinea-titolo-capitolo: 0.86;
    --tracciamento-titolo-capitolo: -0.03em;

    --testo-minimo: clamp(0.72rem, 0.69rem + 0.12vw, 0.8rem);
    --testo-piccolo: clamp(0.82rem, 0.78rem + 0.16vw, 0.92rem);
    --testo-corpo: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
    --testo-display: clamp(3.25rem, 1.2rem + 10vw, 12rem);

    --interlinea-titolo: 0.96;
    --interlinea-corpo: 1.55;
    --tracciamento-display: -0.04em;
    --tracciamento-testo: -0.012em;

    /* Spaziatura. I valori grandi sono fluidi e bounded. */
    --spazio-1: 0.25rem;
    --spazio-2: 0.5rem;
    --spazio-3: 0.75rem;
    --spazio-4: 1rem;
    --spazio-5: 1.5rem;
    --spazio-6: 2rem;
    --spazio-7: clamp(2.5rem, 2rem + 2vw, 4rem);
    --spazio-8: clamp(4rem, 3rem + 4vw, 7rem);
    --spazio-capitolo: clamp(8rem, 4rem + 14vw, 18rem);

    /*
     * Misure e griglia.
     * Questi token governano sia le linee visibili sia i layout reali.
     * I componenti scelgono soltanto start e span; non ridefiniscono la base.
     */
    --margine-pagina: clamp(0.75rem, 0.42rem + 1.65vw, 2.5rem);
    --larghezza-pagina: 120rem;
    --larghezza-contenuto: min(
        calc(100% - (2 * var(--margine-pagina))),
        var(--larghezza-pagina)
    );
    --colonne-griglia: 6;
    --passo-griglia: calc(100% / var(--colonne-griglia));
    --breakpoint-tablet-rem: 48;
    --breakpoint-desktop-rem: 64;
    --breakpoint-epsilon-rem: 0.001;
    --altezza-viewport-bassa-rem: 44;
    --rientro-ottico-display: clamp(0.5rem, 0.35rem + 0.45vw, 0.875rem);
    --misura-testo-stretto: 34ch;
    --altezza-target-interattivo: 2.75rem;
    --spessore-linea: 1px;

    /*
     * Display full-bleed. Il fitter misura il font realmente caricato; questi
     * valori definiscono fallback, margine ottico e limite anti-arrotondamento.
     */
    --base-misura-display-px: 100;
    --sicurezza-fit-display: 0.998;
    --soglia-ricalcolo-display-px: 0.5;
    --allungamento-display-base: 100%;
    --asse-larghezza-display-base: 100;
    --peso-display-base: 760;
    --interlinea-display-base: 0.86;
    --allungamento-display-editoriale: 112%;
    --asse-larghezza-display-editoriale: 112;
    --dimensione-display-massima: 40rem;
    --dimensione-titolo-lavori-minima: 2rem;
    --dimensione-titolo-lavori-fluida: 13.2vw;
    --dimensione-titolo-lavori: clamp(
        var(--dimensione-titolo-lavori-minima),
        var(--dimensione-titolo-lavori-fluida),
        var(--dimensione-display-massima)
    );
    --interlinea-titolo-lavori: var(--interlinea-display-base);
    --allungamento-titolo-lavori: var(--allungamento-display-editoriale);
    --asse-larghezza-titolo-lavori: var(--asse-larghezza-display-editoriale);
    --peso-titolo-lavori: var(--peso-display-base);
    --rientro-titolo-lavori-inizio: max(1px, 0.05vw);
    --rientro-titolo-lavori-fine: max(2px, 0.1vw);

    /* Geometria condivisa dal palco Hero e dal campo atmosferico. */
    --altezza-testata-mobile-fallback: 4rem;
    --altezza-minima-hero: 36rem;
    --altezza-palco-hero-fallback: calc(
        100vh
        - var(--altezza-testata-mobile-fallback)
        - var(--wp-admin--admin-bar--height, 0px)
    );
    --estensione-atmosfera-hero: 0px;
    --altezza-palco-hero-composizione-fallback: max(
        var(--altezza-minima-hero),
        var(--altezza-palco-hero-fallback)
    );
    --profondita-raccordo-hero-mobile-bassa: clamp(4rem, 10vh, 5.5rem);

    /* Selected Works: spazio di raccordo e rivelazione del display. */
    --altezza-intro-lavori: clamp(4.5rem, 9vh, 6rem);

    /* Regia condivisa del raccordo Hero / Selected Works. */
    --motion-scroll-raccordo-start: top 104%;
    --motion-scroll-raccordo-end: top 22%;
    --motion-raccordo-titolo-inizio: 0.4;
    --motion-raccordo-titolo-durata: 0.24;
    --motion-scroll-titolo-lavori-scrub: 0.16;
    --motion-atmosfera-rivelazione-fine: 1;

    /* Movimento. I singoli componenti definiscono cosa animare. */
    --durata-rapida: 140ms;
    --durata-base: 260ms;
    --durata-lenta: 700ms;
    --curva-uscita: cubic-bezier(0.22, 1, 0.36, 1);

}

:where([data-babajaga-tema="v2"]) {
    color: var(--colore-testo);
    background-color: var(--colore-superficie);
    font-family: var(--famiglia-corpo);
    font-size: var(--testo-corpo);
    font-weight: var(--peso-regolare);
    line-height: var(--interlinea-corpo);
    letter-spacing: var(--tracciamento-testo);
    text-rendering: optimizeLegibility;
}

@media (min-width: 48rem) and (max-width: 63.999rem) {
    :where(body.pagina-home-v2, [data-babajaga-tema="v2"]) {
        --altezza-intro-lavori: clamp(6.5rem, 12vh, 8.5rem);
        --motion-scroll-raccordo-start: top 106%;
        --motion-scroll-raccordo-end: top 21%;
        --motion-raccordo-titolo-inizio: 0.41;
        --motion-raccordo-titolo-durata: 0.3;
        --motion-scroll-titolo-lavori-scrub: 0.18;
    }
}

@media (min-width: 48rem) {
    :where(body.pagina-home-v2, [data-babajaga-tema="v2"]) {
        --altezza-minima-hero: 43rem;
        --altezza-palco-hero-fallback: 100vh;
    }
}

@media (min-width: 64rem) {
    :where(body.pagina-home-v2, [data-babajaga-tema="v2"]) {
        --colonne-griglia: 12;
        --passo-griglia: calc(100% / var(--colonne-griglia));
        --altezza-intro-lavori: clamp(8rem, 15vh, 10.5rem);
        --motion-scroll-raccordo-start: top 108%;
        --motion-scroll-raccordo-end: top 20%;
        --motion-raccordo-titolo-inizio: 0.37;
        --motion-raccordo-titolo-durata: 0.3;
        --motion-scroll-titolo-lavori-scrub: 0.2;

    }
}

@media (max-width: 47.999rem) and (max-height: 44rem) {
    :where(body.pagina-home-v2, [data-babajaga-tema="v2"]) {
        --estensione-atmosfera-hero: var(--profondita-raccordo-hero-mobile-bassa);
    }
}

@supports (height: 1svh) {
    :where(body.pagina-home-v2, [data-babajaga-tema="v2"]) {
        --altezza-palco-hero-fallback: calc(
            100svh
            - var(--altezza-testata-mobile-fallback)
            - var(--wp-admin--admin-bar--height, 0px)
        );
        --profondita-raccordo-hero-mobile-bassa: clamp(4rem, 10svh, 5.5rem);
        --altezza-intro-lavori: clamp(4.5rem, 9svh, 6rem);
    }

    @media (min-width: 48rem) {
        :where(body.pagina-home-v2, [data-babajaga-tema="v2"]) {
            --altezza-palco-hero-fallback: 100svh;
            --altezza-intro-lavori: clamp(6.5rem, 12svh, 8.5rem);
        }
    }

    @media (min-width: 64rem) {
        :where(body.pagina-home-v2, [data-babajaga-tema="v2"]) {
            --altezza-intro-lavori: clamp(8rem, 15svh, 10.5rem);
        }
    }

}

/*
 * Il fallback moderno scala sulla rail box reale, non sulla viewport fisica.
 * Il fitter JavaScript rifinisce poi la misura sul font effettivamente caricato.
 */
@supports (font-size: 1cqi) {
    :where(body.pagina-home-v2, [data-babajaga-tema="v2"]) {
        --dimensione-titolo-lavori-fluida: 13.2cqi;
    }
}

:where([data-babajaga-tema="v2"], [data-babajaga-tema="v2"] *, [data-babajaga-tema="v2"] *::before, [data-babajaga-tema="v2"] *::after) {
    box-sizing: border-box;
}

:where([data-babajaga-tema="v2"] h1, [data-babajaga-tema="v2"] h2, [data-babajaga-tema="v2"] h3) {
    margin-block: 0;
    color: inherit;
    font-family: var(--famiglia-display);
    text-wrap: balance;
}

:where([data-babajaga-tema="v2"] p) {
    margin-block: 0;
    text-wrap: pretty;
}

:where([data-babajaga-tema="v2"] img, [data-babajaga-tema="v2"] picture, [data-babajaga-tema="v2"] video, [data-babajaga-tema="v2"] svg) {
    display: block;
    max-inline-size: 100%;
}

:where([data-babajaga-tema="v2"] a) {
    color: inherit;
}

:where([data-babajaga-tema="v2"] :focus-visible) {
    outline: 2px solid var(--colore-focus);
    outline-offset: 3px;
}

:where([data-babajaga-tema="v2"]) ::selection {
    color: var(--colore-superficie);
    background: var(--colore-testo);
}

@media (prefers-reduced-motion: reduce) {
    :where([data-babajaga-tema="v2"]) {
        --durata-rapida: 0ms;
        --durata-base: 0ms;
        --durata-lenta: 0ms;
    }
}