/**
 * PARTECIPA — MOOC · Design Tokens
 * ============================================================================
 * Direzione visiva dell'AREA MOOC (piattaforma di apprendimento), DISTINTA dal
 * brand istituzionale del sito (navy #1C2E6E + arancione + girandola).
 * Estratta fedelmente dai mockup committente "Partecipa_MOOC_mockup_grafici.pdf"
 * (37 schermate) campionando i pixel esatti delle aree a tinta piatta.
 *
 * Convenzione nomenclatura: --mooc-<token>   (vs --pa-* del brand istituzionale)
 *
 * Contrasti WCAG calcolati su #FFFFFF (testo) o vs bianco (UI scura).
 * AA = ≥4.5:1 testo normale · ≥3:1 testo grande/UI · AAA = ≥7:1
 * Regola invariata di progetto: niente testo normale < 4.5:1 su bianco.
 * ============================================================================
 */

/* NB: i font (Poppins/Inter) sono già caricati self-hosted dal child theme via
 * assets/css/fonts.css (handle 'partecipa-fonts'), accodato come dipendenza.
 * Qui NON si ridichiarano @font-face per evitare duplicati. */

:root {

  /* ====================================================================== */
  /* CORE BRAND MOOC                                                         */
  /* ====================================================================== */

  /** Navy profondo — sidebar globale (dashboard/forum/profilo), UI scura,
   *  titoli. Campionato #092546. Bianco su navy: 15.35:1 → AAA ✓ */
  --mooc-navy:          #0A2547;
  --mooc-navy-700:      #112E55;   /* hover/elevazione su navy */

  /** TEAL — colore PRIMARIO del MOOC (CTA, stati attivi, link, Modulo 2).
   *  Campionato #018A8D. Bianco su teal: 4.18:1 → AA large/UI, NON testo piccolo. */
  --mooc-teal:          #018A8D;
  /** Teal forte — fondo bottoni/badge con testo bianco. 6.31:1 → AA ✓ */
  --mooc-teal-strong:   #016B6E;
  /** Teal "ink" — teal per TESTO/link su bianco. 6.05:1 → AA ✓ */
  --mooc-teal-ink:      #0A6E6E;
  /** Tinte teal per fondi soft, hover, fasce. */
  --mooc-teal-100:      #DCEFEC;
  --mooc-teal-50:       #EEF7F6;

  /** Verde — fine gradiente hero, stati "successo/completato", accenti.
   *  #46B980 decorativo (2.47:1). Per testo/successo usare ink 4.54:1 AA. */
  --mooc-green:         #46B980;
  --mooc-green-ink:     #2F855A;
  --mooc-green-100:     #E4F3EB;

  /** Gradiente hero (homepage MOOC): teal → verde. */
  --mooc-hero-from:     #2E8B86;
  --mooc-hero-to:       #5FB488;

  /* ====================================================================== */
  /* COLORI PER MODULO (accent tematico di ciascun modulo del percorso)      */
  /* Ogni modulo colora: sidebar overview/unità, numeri, icone, strisce      */
  /* card, bottoni e tag. *-strong = variante AA per testo/bottoni pieni.    */
  /* ====================================================================== */

  /* Modulo 1 — Viola / Indigo */
  --mooc-m1:            #6B4FA6;   /* viola brand        · bianco 6.37:1 AA ✓ */
  --mooc-m1-strong:     #464189;   /* indigo sidebar     · bianco 8.83:1 AAA ✓ */
  --mooc-m1-accent:     #7245A7;   /* viola interattivo  · bianco 6.72:1 AA ✓ */
  --mooc-m1-100:        #ECE6F5;   /* tinta card/fondo soft */

  /* Modulo 2 — Teal (= primario MOOC) */
  --mooc-m2:            var(--mooc-teal);
  --mooc-m2-strong:     var(--mooc-teal-strong);
  --mooc-m2-100:        var(--mooc-teal-100);

  /* Modulo 3 — Arancione */
  --mooc-m3:            #EA770A;   /* arancione brand · DECORATIVO (2.94:1) */
  --mooc-m3-strong:     #C2410C;   /* fondo bottoni testo-bianco · ~4.7:1 AA ✓ */
  --mooc-m3-ink:        #B45309;   /* arancione per TESTO su bianco · 5.02:1 AA ✓ */
  --mooc-m3-100:        #FBEEDE;   /* tinta card/fondo soft */

  /* Modulo 4 — Blu royal */
  --mooc-m4:            #2679DF;   /* blu brand · bianco 4.30:1 AA large/UI */
  --mooc-m4-strong:     #1B4F9E;   /* fondo bottoni/testo · bianco 7.90:1 AAA ✓ */
  --mooc-m4-100:        #E8ECF2;   /* tinta card/fondo soft */

  /* ====================================================================== */
  /* NEUTRI                                                                  */
  /* ====================================================================== */
  --mooc-ink:           #1A1A2E;   /* testo corpo · 17.06:1 AAA ✓ */
  --mooc-muted:         #5A5A6E;   /* testo secondario/metadata · 6.73:1 AA ✓ */
  --mooc-line:          #E3E8F0;   /* bordi card/divider */
  --mooc-line-soft:     #EDF0F6;
  --mooc-bg:            #FFFFFF;   /* fondo card/superfici */
  --mooc-bg-app:        #F4F6FB;   /* fondo applicazione/canvas */
  --mooc-bg-soft:       #F7F9FC;   /* fondo sezioni soft dentro le card */
  --mooc-white:         #FFFFFF;

  /* ====================================================================== */
  /* TIPOGRAFIA                                                              */
  /* ====================================================================== */
  --mooc-font-head: "Poppins", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mooc-font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  --mooc-fs-display: 2rem;      /* H1 pagina            (~32px) */
  --mooc-fs-h2:      1.375rem;  /* titoli sezione       (~22px) */
  --mooc-fs-h3:      1.0625rem; /* titoli card          (~17px) */
  --mooc-fs-body:    0.9375rem; /* corpo                (~15px) */
  --mooc-fs-sm:      0.8125rem; /* metadata/caption     (~13px) */
  --mooc-fs-xs:      0.6875rem; /* eyebrow/label        (~11px) */
  --mooc-lh-body:    1.55;

  /* ====================================================================== */
  /* FORMA — raggi, ombre, spaziatura, layout                                */
  /* ====================================================================== */
  --mooc-r-sm:   8px;
  --mooc-r:      12px;    /* raggio standard bottoni */
  --mooc-r-lg:   16px;    /* raggio card */
  --mooc-r-xl:   22px;    /* raggio pannelli grandi/hero */
  --mooc-r-pill: 999px;

  --mooc-sh-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --mooc-sh:    0 2px 6px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
  --mooc-sh-lg: 0 12px 36px rgba(16,24,40,.10);

  --mooc-gap:        24px;
  --mooc-pad-card:   20px;
  --mooc-sidebar-w:  248px;
  --mooc-topbar-h:   64px;
  --mooc-content-max: 1120px;

  /* Outline focus tastiera (accessibilità) */
  --mooc-focus: 0 0 0 3px rgba(1,138,141,.45);
}

/* Tema per-modulo: applicando .mooc-theme--mN su un contenitore, i componenti
 * "themed" (sidebar, bottoni .is-module, numeri, strisce) ereditano il colore. */
.mooc-theme--m1 { --mooc-accent: var(--mooc-m1); --mooc-accent-strong: var(--mooc-m1-strong); --mooc-accent-100: var(--mooc-m1-100); }
.mooc-theme--m2 { --mooc-accent: var(--mooc-m2); --mooc-accent-strong: var(--mooc-m2-strong); --mooc-accent-100: var(--mooc-m2-100); }
.mooc-theme--m3 { --mooc-accent: var(--mooc-m3); --mooc-accent-strong: var(--mooc-m3-strong); --mooc-accent-100: var(--mooc-m3-100); }
.mooc-theme--m4 { --mooc-accent: var(--mooc-m4); --mooc-accent-strong: var(--mooc-m4-strong); --mooc-accent-100: var(--mooc-m4-100); }
:root        { --mooc-accent: var(--mooc-teal); --mooc-accent-strong: var(--mooc-teal-strong); --mooc-accent-100: var(--mooc-teal-100); }