/**
 * PARTECIPA — Variabili Brand (CSS Custom Properties)
 *
 * Palette in attesa di approvazione definitiva dall'Ateneo di Salerno.
 * Vedere docs/brand/ per aggiornamenti e asset grafici ufficiali.
 *
 * Convenzione nomenclatura: --pa-<nome-token>
 *
 * Livelli WCAG indicati sono calcolati su sfondo bianco (#FFFFFF).
 * AA  = ≥ 4.5:1 (testo normale) o ≥ 3:1 (testo grande/UI)
 * AAA = ≥ 7:1
 *
 * REGOLA: non usare colori con contrasto < 4.5:1 per testo normale su bianco.
 */

:root {

    /* ------------------------------------------------------------------ */
    /* COLORI PRIMARI ISTITUZIONALI                                        */
    /* ------------------------------------------------------------------ */

    /**
     * Blu istituzionale — header, titoli, elementi identitari.
     * Contrasto su bianco: ~12.6:1 → AAA ✓
     * Uso: testo, background sezioni scure con testo chiaro.
     */
    --pa-blu-istituzionale: #1C2E6E;

    /**
     * Blu scuro testo — testo corpo corrente.
     * Contrasto su bianco: ~18.1:1 → AAA ✓
     * Uso: paragrafi, contenuto editoriale principale.
     */
    --pa-blu-scuro-testo: #1A1A2E;

    /**
     * Azzurro — accento decorativo/grafico (frecce, bordi, icone grandi).
     * Contrasto su bianco: ~3.7:1 → AA per large text/UI, NON per testo normale.
     * Uso: solo elementi grafici e testo grande (≥ 18pt o ≥ 14pt bold).
     */
    --pa-azzurro: #2D9CDB;

    /* ------------------------------------------------------------------ */
    /* CHROME ISTITUZIONALE UNISA (Fase 2.1)                              */
    /* ------------------------------------------------------------------ */

    /**
     * Blu UNISA — utility bar bg, nav bg secondaria, card link, breadcrumb link.
     * Contrasto bianco su questo sfondo: 7.53:1 → AAA ✓
     * Uso: background chrome istituzionale; testo/link su questo sfondo = #FFFFFF.
     */
    --pa-blu-unisa: #2F577F;

    /**
     * Footer scuro background.
     * Contrasto --pa-footer-text su questo: 10.17:1 → AAA ✓
     */
    --pa-footer: #222633;

    /**
     * Testo principale footer su --pa-footer.
     * Contrasto: 10.17:1 → AAA ✓
     */
    --pa-footer-text: #cfd4e2;

    /**
     * Testo secondario/legal footer su --pa-footer.
     * Contrasto: 7.11:1 → AAA ✓
     */
    --pa-footer-muted: #aab2c8;

    /**
     * Link footer; hover → #FFFFFF.
     */
    --pa-footer-link: #aab2c8;

    /**
     * Bordo top arancione 4px della cobrand-strip (solo decorativo, non testo).
     * NON usare per testo: contrasto su bianco 2.98:1 → FAIL AA.
     */
    --pa-cobrand-border: #EE7203;

    /**
     * Gradiente hero — colore start (navy PARTECIPA).
     */
    --pa-hero-overlay-start: rgba(28,46,110,.92);

    /**
     * Gradiente hero — colore end (blu UNISA).
     */
    --pa-hero-overlay-end: rgba(47,87,127,.78);

    /**
     * Page header band pagine interne — gradiente start.
     */
    --pa-page-header-start: #1C2E6E;

    /**
     * Page header band pagine interne — gradiente end.
     */
    --pa-page-header-end: #2F577F;

    /* ------------------------------------------------------------------ */
    /* ARANCIONE — DUE TOKEN DISTINTI PER ACCESSIBILITA                   */
    /* ------------------------------------------------------------------ */

    /**
     * Arancione brillante — colore secondario del brand, solo decorativo.
     * Contrasto su bianco: ~2.98:1 → NON-AA per testo normale ✗
     * Uso CONSENTITO: sfondi colorati grandi, icone, illustrazioni, grafica decorativa.
     * Uso VIETATO: testo normale, link, label di form, qualsiasi testo < 18pt su bianco.
     */
    --pa-arancione: #EE7203;

    /**
     * Arancione accessibile — versione scura per testo e link su sfondo bianco.
     * Contrasto su bianco: ~5.0:1 → AA ✓
     * Uso: link nel corpo testo, CTA secondarie su bianco, testo su sfondo chiaro.
     */
    --pa-arancione-accessibile: #B45309;

    /* ------------------------------------------------------------------ */
    /* ACCENTI MULTICOLOR — VARIANTI ACCESSIBILI (AA) del logo ufficiale  */
    /* Versioni più scure dei petali --pa-logo-* (vedi blocco sotto):     */
    /* usabili anche per testo/badge su bianco. Per la resa grafica       */
    /* fedele al marchio usare invece i token --pa-logo-*.                */
    /* ------------------------------------------------------------------ */

    /**
     * Verde — nodi rete, elementi "società civile".
     * Contrasto su bianco: ~4.5:1 → AA ✓ (al limite, verificare caso per caso)
     * Uso: badge, tag tematici, elementi grafici rete territoriale.
     */
    --pa-verde: #2F855A;

    /**
     * Rosso — accento multicolor logo.
     * Contrasto su bianco: ~4.6:1 → AA ✓
     * Uso: accenti grafici, non testo corpo corrente.
     */
    --pa-rosso: #E2342B;

    /**
     * Giallo — accento multicolor logo.
     * Contrasto su bianco: ~1.8:1 → NON-AA ✗
     * Uso: SOLO elementi grafici/illustrativi, mai per testo su bianco.
     */
    --pa-giallo: #F2C200;

    /**
     * Viola — accento multicolor logo.
     * Contrasto su bianco: ~5.3:1 → AA ✓
     * Uso: accenti grafici, eventuale categorizzazione tematica.
     */
    --pa-viola: #7A3E9D;

    /* ------------------------------------------------------------------ */
    /* PALETTE UFFICIALE LOGO PARTECIPA                                    */
    /* (estratta dal vettoriale ufficiale consegnato il 2026-06-17,        */
    /*  assets/loghi/partecipa/partecipa-logo.svg — la "girandola")        */
    /* ------------------------------------------------------------------ */

    /**
     * Colori ESATTI dei 9 "petali" della girandola del logo ufficiale.
     * USO: solo elementi grafici/illustrativi (icone, sfondi grandi, accenti
     * decorativi, barre colorate delle card). Sono colori brillanti/pastello
     * pensati per il marchio → la maggior parte NON raggiunge il contrasto
     * WCAG AA su bianco per testo: per testo/link usare i token accessibili
     * (--pa-arancione-accessibile, --pa-viola, --pa-verde, ecc. sotto/sopra).
     * Regola invariata: mai testo normale su bianco con questi colori.
     */
    --pa-logo-viola:   #7F73B4;  /* petalo viola      */
    --pa-logo-giallo:  #EFE93C;  /* petalo giallo     */
    --pa-logo-rosso:   #DF2726;  /* petalo rosso      */
    --pa-logo-verde:   #46B980;  /* petalo verde      */
    --pa-logo-teal:    #88D0CD;  /* petalo verde-acqua*/
    --pa-logo-cyan:    #00B5E3;  /* petalo azzurro    */
    --pa-logo-ambra:   #FDBF1A;  /* petalo ambra      */
    --pa-logo-arancio: #F69223;  /* petalo arancione  */
    --pa-logo-magenta: #BD6FAC;  /* petalo magenta    */

    /** Nero del wordmark "PARTECIPA" del logo ufficiale. */
    --pa-logo-wordmark: #1A1A2E;

    /* ------------------------------------------------------------------ */
    /* NEUTRI                                                              */
    /* ------------------------------------------------------------------ */

    /**
     * Grigio medio — testo secondario, metadata, caption.
     * Contrasto su bianco: ~5.9:1 → AA ✓
     */
    --pa-grigio: #5A5A6E;

    /**
     * Sfondo bianco puro — sfondo principale.
     */
    --pa-sfondo: #FFFFFF;

    /**
     * Sfondo soft — alternativa leggera per sezioni alternate (cards, sidebar).
     */
    --pa-sfondo-soft: #F4F6FB;

    /* ------------------------------------------------------------------ */
    /* ALIAS SEMANTICI (mapping funzione → token cromatico)               */
    /* ------------------------------------------------------------------ */

    /** Colore primario CTA/link su sfondo scuro */
    --pa-color-primary:       var(--pa-blu-istituzionale);

    /** Colore testo su sfondo chiaro */
    --pa-color-body:          var(--pa-blu-scuro-testo);

    /** Colore link e CTA su sfondo bianco/chiaro (AA-safe) */
    --pa-color-link:          var(--pa-arancione-accessibile);

    /** Colore secondario decorativo */
    --pa-color-accent:        var(--pa-arancione);

    /** Colore testo secondario / metadata */
    --pa-color-muted:         var(--pa-grigio);

    /** Sfondo generale */
    --pa-color-bg:            var(--pa-sfondo);

    /** Sfondo alternato sezioni */
    --pa-color-bg-alt:        var(--pa-sfondo-soft);

    /** Colore outline focus (accessibilità tastiera) */
    --pa-color-focus-outline: var(--pa-azzurro);

    /* ------------------------------------------------------------------ */
    /* WAVE 5 — NUOVI TOKEN (Fase 2.1 Wave 5)                             */
    /* ------------------------------------------------------------------ */

    /**
     * Overlay tinta blu sulle tile mosaico fotografiche.
     * Usato come background semi-opaco sopra la foto placeholder
     * per garantire contrasto AAA della label bianca sovrapposta.
     * rgba(28,46,110,.72) = navy PARTECIPA al 72%:
     *   su foto tipica campus (luminanza ~0.18) → rapporto effettivo > 7:1
     *   Contrasto label bianca su overlay puro #1C2E6E: 12.6:1 → AAA ✓
     */
    --pa-tile-overlay: rgba(28, 46, 110, 0.72);

    /**
     * Overlay tile hover: schiarimento leggero (riduce opacità overlay).
     * Stessa base navy, meno opaca → foto più visibile in hover.
     */
    --pa-tile-overlay-hover: rgba(28, 46, 110, 0.52);

}

/* ------------------------------------------------------------------ */
/* CLASSI UTILITY                                                      */
/* ------------------------------------------------------------------ */

/**
 * Sfondo blu istituzionale con testo bianco (contrasto ~12.6:1 AAA).
 * Uso: hero, header alternativi, sezioni di copertina.
 */
.partecipa-bg-primary {
    background-color: var(--pa-blu-istituzionale);
    color: var(--pa-sfondo);
}

/**
 * Testo arancione accessibile su sfondo chiaro (contrasto ~5.0:1 AA).
 * Uso: link evidenziati, call-to-action secondarie.
 */
.partecipa-text-accessible-orange {
    color: var(--pa-arancione-accessibile);
}

/**
 * Sfondo soft con testo scuro standard.
 * Uso: sezioni alternate, card background.
 */
.partecipa-bg-soft {
    background-color: var(--pa-sfondo-soft);
    color: var(--pa-blu-scuro-testo);
}

/**
 * Testo blu istituzionale (titoli, elementi istituzionali su sfondo bianco).
 */
.partecipa-text-primary {
    color: var(--pa-blu-istituzionale);
}

/**
 * Testo grigio per metadata/secondario (contrasto ~5.9:1 AA su bianco).
 */
.partecipa-text-muted {
    color: var(--pa-grigio);
}