/*
 * Babajaga V2 - display editoriale ancorato alla griglia.
 *
 * Il componente possiede la voce tipografica condivisa. Le singole istanze
 * configurano soltanto scala, interlinea, colore e correzione ottica.
 */

:where([data-babajaga-tema="v2"] .titolo-display-v2) {
    --titolo-display-dimensione-fallback: var(--testo-display);
    --titolo-display-dimensione: var(
        --titolo-display-dimensione-fit,
        var(--titolo-display-scala-fallback, var(--titolo-display-dimensione-fallback))
    );
    --titolo-display-allungamento: var(--allungamento-display-base);
    --titolo-display-asse-larghezza: var(--asse-larghezza-display-base);
    --titolo-display-peso: var(--peso-display-base);
    --titolo-display-interlinea: var(--interlinea-display-base);
    --titolo-display-tracciamento: var(--tracciamento-display);
    --titolo-display-sicurezza-fit: var(--sicurezza-fit-display, 0.985);
}

[data-babajaga-tema="v2"] .titolo-display-v2 {
    grid-column: 1 / -1;
    color: var(--titolo-display-colore, currentColor);
    font-family: var(--famiglia-display);
    font-size: var(--titolo-display-dimensione-fallback);
    font-size: var(--titolo-display-dimensione);
    font-stretch: var(--titolo-display-allungamento);
    font-variation-settings:
        "wdth" var(--titolo-display-asse-larghezza),
        "wght" var(--titolo-display-peso);
    font-weight: var(--titolo-display-peso);
    line-height: var(--titolo-display-interlinea);
    letter-spacing: var(--titolo-display-tracciamento);
    text-align: start;
    white-space: nowrap;
}

[data-babajaga-tema="v2"] .titolo-display-v2[data-display-tone="inverse"] {
    --titolo-display-colore: var(--colore-display-su-scuro, var(--colore-testo));
}

[data-babajaga-tema="v2"] .titolo-display-v2[data-display-tone="ink"] {
    --titolo-display-colore: var(--colore-display-su-carta, var(--colore-nero-profondo));
}

[data-babajaga-tema="v2"] .titolo-display-v2[data-display-fit="ready"] {
    font-size: var(--titolo-display-dimensione-fit);
}