/* ═══════════════════════════════════════════════════════════════════════════
   PONTE VERSO BOOTSTRAP — NON MODIFICARE
   Fa parte di uicore/core: al prossimo riallineamento questo file viene
   sovrascritto. Per cambiare i colori: config/brand.css.
   ═══════════════════════════════════════════════════════════════════════════

   Traduce i token di `config/brand.css` nelle variabili che Bootstrap usa
   davvero, così i suoi componenti nativi (pulsanti, badge, alert, form,
   tabelle) parlano la lingua del brand senza toccarne il CSS compilato.

   ┌─ Perché questo file esiste ─────────────────────────────────────────────┐
   │ Bootstrap 5.3 compila i colori dei pulsanti in valori fissi: la classe   │
   │ `.btn-primary` NON legge `--bs-primary`. Senza questo ponte, cambiare    │
   │ il brand cambierebbe i badge ma non i pulsanti — che è esattamente il    │
   │ genere di incoerenza che si nota subito.                                 │
   └─────────────────────────────────────────────────────────────────────────┘

   Le varianti tenui (sfondo, bordo, testo enfatizzato) sono DERIVATE con
   `color-mix()` invece che scritte a mano. Nel frontend di origine erano 444
   proprietà fisse: cambiare il viola voleva dire ricalcolarne trenta a mano.
   Qui si cambia una riga e tutto il resto segue.

   `color-mix()` è supportato da tutti i browser dal 2023. In oklab invece che
   in sRGB perché le miscele restano percettivamente uniformi: un rosso
   schiarito resta rosso, non diventa rosa spento.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Tinte ─────────────────────────────────────────────────────────── */
    --bs-primary: var(--ui-brand);
    --bs-primary-rgb: var(--ui-brand-rgb);
    --bs-secondary: var(--ui-accent);
    --bs-secondary-rgb: var(--ui-accent-rgb);
    --bs-success: var(--ui-success);
    --bs-success-rgb: var(--ui-success-rgb);
    --bs-warning: var(--ui-warning);
    --bs-warning-rgb: var(--ui-warning-rgb);
    --bs-danger: var(--ui-danger);
    --bs-danger-rgb: var(--ui-danger-rgb);

    /* ── Varianti derivate ─────────────────────────────────────────────────
       `text-emphasis` = testo colorato leggibile su fondo chiaro
       `bg-subtle`     = fondo tenue di badge e avvisi
       `border-subtle` = bordo appena accennato */
    --bs-primary-text-emphasis: color-mix(in oklab, var(--ui-brand) 42%, #000);
    --bs-primary-bg-subtle: color-mix(in oklab, var(--ui-brand) 14%, #fff);
    --bs-primary-border-subtle: color-mix(in oklab, var(--ui-brand) 34%, #fff);

    --bs-secondary-text-emphasis: color-mix(in oklab, var(--ui-accent) 42%, #000);
    --bs-secondary-bg-subtle: color-mix(in oklab, var(--ui-accent) 14%, #fff);
    --bs-secondary-border-subtle: color-mix(in oklab, var(--ui-accent) 34%, #fff);

    --bs-success-text-emphasis: color-mix(in oklab, var(--ui-success) 42%, #000);
    --bs-success-bg-subtle: color-mix(in oklab, var(--ui-success) 14%, #fff);
    --bs-success-border-subtle: color-mix(in oklab, var(--ui-success) 34%, #fff);

    --bs-warning-text-emphasis: color-mix(in oklab, var(--ui-warning) 46%, #000);
    --bs-warning-bg-subtle: color-mix(in oklab, var(--ui-warning) 16%, #fff);
    --bs-warning-border-subtle: color-mix(in oklab, var(--ui-warning) 36%, #fff);

    --bs-danger-text-emphasis: color-mix(in oklab, var(--ui-danger) 42%, #000);
    --bs-danger-bg-subtle: color-mix(in oklab, var(--ui-danger) 14%, #fff);
    --bs-danger-border-subtle: color-mix(in oklab, var(--ui-danger) 34%, #fff);

    /* `info` resta neutro: è la tinta di ciò che non ha un significato
       forte, e colorarla toglie peso agli stati che invece lo hanno. */
    --bs-info: color-mix(in oklab, var(--ui-ink) 8%, var(--ui-panel));
    --bs-info-rgb: 243, 244, 246;
    --bs-info-text-emphasis: var(--ui-ink-muted);
    --bs-info-bg-subtle: color-mix(in oklab, var(--ui-ink) 4%, var(--ui-panel));
    --bs-info-border-subtle: color-mix(in oklab, var(--ui-ink) 10%, var(--ui-panel));

    /* ── Corpo e superfici ─────────────────────────────────────────────── */
    --bs-body-bg: var(--ui-page);
    --bs-body-color: var(--ui-ink);
    --bs-secondary-color: var(--ui-ink-muted);
    --bs-emphasis-color: var(--ui-ink);
    --bs-border-color: color-mix(in oklab, var(--ui-ink) 12%, transparent);
    --bs-border-color-translucent: color-mix(in oklab, var(--ui-ink) 8%, transparent);

    --bs-link-color: var(--ui-brand);
    --bs-link-color-rgb: var(--ui-brand-rgb);
    --bs-link-hover-color: color-mix(in oklab, var(--ui-brand) 78%, #000);

    /* ── Tipografia e forme ────────────────────────────────────────────── */
    --bs-body-font-family: var(--ui-font-body);
    --bs-body-font-size: var(--ui-text-md);
    --bs-body-line-height: var(--ui-leading-normal);

    --bs-border-radius-sm: var(--ui-radius-xs);
    --bs-border-radius: var(--ui-radius-sm);
    --bs-border-radius-lg: var(--ui-radius-md);
    --bs-border-radius-xl: var(--ui-radius-lg);
    --bs-border-radius-2xl: var(--ui-radius-xl);
    --bs-border-radius-pill: var(--ui-radius-pill);

    /* Anello di focus visibile: è un requisito di accessibilità, non una
       decorazione. Chi naviga da tastiera deve sapere dov'è. */
    --bs-focus-ring-width: 3px;
    --bs-focus-ring-opacity: .3;
    --bs-focus-ring-color: rgba(var(--ui-brand-rgb), .3);
}

[data-bs-theme="dark"] {
    /* Su fondo scuro le miscele si fanno col nero, non col bianco: un
       "bg-subtle" schiarito col bianco su sfondo nero abbaglia. */
    --bs-primary-text-emphasis: color-mix(in oklab, var(--ui-brand) 62%, #fff);
    --bs-primary-bg-subtle: color-mix(in oklab, var(--ui-brand) 16%, #000);
    --bs-primary-border-subtle: color-mix(in oklab, var(--ui-brand) 34%, #000);

    --bs-secondary-text-emphasis: color-mix(in oklab, var(--ui-accent) 62%, #fff);
    --bs-secondary-bg-subtle: color-mix(in oklab, var(--ui-accent) 16%, #000);
    --bs-secondary-border-subtle: color-mix(in oklab, var(--ui-accent) 34%, #000);

    --bs-success-text-emphasis: color-mix(in oklab, var(--ui-success) 62%, #fff);
    --bs-success-bg-subtle: color-mix(in oklab, var(--ui-success) 16%, #000);
    --bs-success-border-subtle: color-mix(in oklab, var(--ui-success) 34%, #000);

    --bs-warning-text-emphasis: color-mix(in oklab, var(--ui-warning) 62%, #fff);
    --bs-warning-bg-subtle: color-mix(in oklab, var(--ui-warning) 16%, #000);
    --bs-warning-border-subtle: color-mix(in oklab, var(--ui-warning) 34%, #000);

    --bs-danger-text-emphasis: color-mix(in oklab, var(--ui-danger) 62%, #fff);
    --bs-danger-bg-subtle: color-mix(in oklab, var(--ui-danger) 16%, #000);
    --bs-danger-border-subtle: color-mix(in oklab, var(--ui-danger) 34%, #000);

    --bs-border-color: color-mix(in oklab, #fff 14%, transparent);
    --bs-border-color-translucent: color-mix(in oklab, #fff 9%, transparent);
    --bs-link-hover-color: color-mix(in oklab, var(--ui-brand) 78%, #fff);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PULSANTI
   Bootstrap compila i colori dei pulsanti in valori fissi, quindi le sue
   classi vanno ridefinite variabile per variabile. Hover al 15% più scuro,
   premuto al 22%: abbastanza da sentire la risposta, non tanto da sembrare
   un colore diverso.
   ═══════════════════════════════════════════════════════════════════════════ */

.btn-primary {
    --bs-btn-color: var(--ui-brand-contrast);
    --bs-btn-bg: var(--ui-brand);
    --bs-btn-border-color: var(--ui-brand);
    --bs-btn-hover-color: var(--ui-brand-contrast);
    --bs-btn-hover-bg: color-mix(in oklab, var(--ui-brand) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in oklab, var(--ui-brand) 85%, #000);
    --bs-btn-active-color: var(--ui-brand-contrast);
    --bs-btn-active-bg: color-mix(in oklab, var(--ui-brand) 78%, #000);
    --bs-btn-active-border-color: color-mix(in oklab, var(--ui-brand) 78%, #000);
    --bs-btn-disabled-color: var(--ui-brand-contrast);
    --bs-btn-disabled-bg: color-mix(in oklab, var(--ui-brand) 45%, var(--ui-page));
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-focus-shadow-rgb: var(--ui-brand-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--ui-brand);
    --bs-btn-border-color: color-mix(in oklab, var(--ui-brand) 45%, transparent);
    --bs-btn-hover-color: var(--ui-brand-contrast);
    --bs-btn-hover-bg: var(--ui-brand);
    --bs-btn-hover-border-color: var(--ui-brand);
    --bs-btn-active-color: var(--ui-brand-contrast);
    --bs-btn-active-bg: color-mix(in oklab, var(--ui-brand) 85%, #000);
    --bs-btn-active-border-color: color-mix(in oklab, var(--ui-brand) 85%, #000);
    --bs-btn-disabled-color: color-mix(in oklab, var(--ui-brand) 45%, transparent);
    --bs-btn-disabled-border-color: color-mix(in oklab, var(--ui-brand) 25%, transparent);
    --bs-btn-focus-shadow-rgb: var(--ui-brand-rgb);
}

.btn-secondary {
    --bs-btn-color: var(--ui-accent-contrast);
    --bs-btn-bg: var(--ui-accent);
    --bs-btn-border-color: var(--ui-accent);
    --bs-btn-hover-color: var(--ui-accent-contrast);
    --bs-btn-hover-bg: color-mix(in oklab, var(--ui-accent) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in oklab, var(--ui-accent) 85%, #000);
    --bs-btn-active-bg: color-mix(in oklab, var(--ui-accent) 78%, #000);
    --bs-btn-active-border-color: color-mix(in oklab, var(--ui-accent) 78%, #000);
    --bs-btn-focus-shadow-rgb: var(--ui-accent-rgb);
}

.btn-outline-secondary {
    --bs-btn-color: var(--ui-ink);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--ui-ink);
    --bs-btn-hover-bg: color-mix(in oklab, var(--ui-ink) 6%, transparent);
    --bs-btn-hover-border-color: color-mix(in oklab, var(--ui-ink) 22%, transparent);
    --bs-btn-active-bg: color-mix(in oklab, var(--ui-ink) 10%, transparent);
    --bs-btn-active-color: var(--ui-ink);
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ui-success);
    --bs-btn-border-color: var(--ui-success);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in oklab, var(--ui-success) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in oklab, var(--ui-success) 85%, #000);
    --bs-btn-active-bg: color-mix(in oklab, var(--ui-success) 78%, #000);
    --bs-btn-focus-shadow-rgb: var(--ui-success-rgb);
}

.btn-warning {
    /* Testo scuro: il bianco su giallo non raggiunge il contrasto minimo. */
    --bs-btn-color: #241C08;
    --bs-btn-bg: var(--ui-warning);
    --bs-btn-border-color: var(--ui-warning);
    --bs-btn-hover-color: #241C08;
    --bs-btn-hover-bg: color-mix(in oklab, var(--ui-warning) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in oklab, var(--ui-warning) 85%, #000);
    --bs-btn-active-bg: color-mix(in oklab, var(--ui-warning) 78%, #000);
    --bs-btn-focus-shadow-rgb: var(--ui-warning-rgb);
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ui-danger);
    --bs-btn-border-color: var(--ui-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in oklab, var(--ui-danger) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in oklab, var(--ui-danger) 85%, #000);
    --bs-btn-active-bg: color-mix(in oklab, var(--ui-danger) 78%, #000);
    --bs-btn-focus-shadow-rgb: var(--ui-danger-rgb);
}

.btn-outline-danger {
    --bs-btn-color: var(--ui-danger);
    --bs-btn-border-color: color-mix(in oklab, var(--ui-danger) 45%, transparent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ui-danger);
    --bs-btn-hover-border-color: var(--ui-danger);
    --bs-btn-focus-shadow-rgb: var(--ui-danger-rgb);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM
   Bootstrap compila anche il colore di selezione di caselle e interruttori.
   ═══════════════════════════════════════════════════════════════════════════ */

.form-check-input:checked {
    background-color: var(--ui-brand);
    border-color: var(--ui-brand);
}

.form-check-input:focus {
    border-color: color-mix(in oklab, var(--ui-brand) 55%, transparent);
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.form-control:focus,
.form-select:focus {
    border-color: color-mix(in oklab, var(--ui-brand) 55%, transparent);
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.form-range::-webkit-slider-thumb { background-color: var(--ui-brand); }
.form-range::-moz-range-thumb { background-color: var(--ui-brand); }