/* Beta Formazione — design tokens (Beta AI · percorso formativo)
   Rilevati dal CSS REALE di betaformazione.com il 27/08/2026 leggendo il kit Elementor
   (post-6.css) e gli stili calcolati dal browser sulle pagine vere, non dal brand kit a
   memoria. La pagina va inserita in quel sito: qui la fonte di verità è il sito.
   Usa SOLO queste variabili. */

/* ---- I font, tutti e due ospitati qui dentro -----------------------------
   Nessun CDN, nessun Google Fonts: entrambi i font stanno in brand/ e si caricano come
   'self'. Non è una preferenza, è un requisito. Il sito che ospita la pagina impone la
   PROPRIA Content-Security-Policy, che sovrascrive quella che imposta index.php: su
   arenamultimedia.it è `style-src 'self' 'unsafe-inline'` e `font-src 'self'`, quindi il
   foglio di Google Fonts veniva **bloccato** e di Raleway non restava dichiarata nessuna
   faccia — il testo cadeva sul font di sistema per chiunque non avesse Raleway installato
   sul proprio computer. Con i file qui dentro la pagina è indifferente a qualunque CSP
   del sito che la ospita, e l'indirizzo IP dei visitatori non arriva più a Google (la
   pagina raccoglie CV: è anche la scelta corretta lato privacy).
   Raleway: un solo file variabile 100-900 (48 KB) al posto di quattro pesi statici.
   Museo: pesi 500 (tutti i titoli) e 700 (riserva per un titolo in grassetto).
   Se un file mancasse, il ripiego è il font di sistema: la pagina resta leggibile. */
@font-face {
  font-family: 'Raleway';
  font-weight: 100 900;
  font-display: swap;
  /* format('woff2') e non 'woff2-variations': quella stringa piu' vecchia non e'
     riconosciuta da tutti i browser, e chi non la riconosce scarta la sorgente e resta
     senza font. Con 'woff2' chi supporta i font variabili usa l asse dei pesi, chi non
     lo supporta usa comunque il font a peso fisso. */
  src: url('brand/raleway-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Museo';
  font-weight: 500;
  font-display: swap;
  src: url('brand/museo-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Museo';
  font-weight: 700;
  font-display: swap;
  src: url('brand/museo-700.woff2') format('woff2');
}

:root {
  /* ---- Colori (identici al kit Elementor del sito) ---- */
  --bf-navy:            #1D2163; /* titoli, CTA primaria, testo del menu */
  --bf-navy-dark:       #131641; /* hover della CTA primaria, velo del gate */
  --bf-amber:           #F1A948; /* accento: fasce, frecce, badge, filo sotto l'hero */
  --bf-amber-light:     #F6C789; /* tinte di supporto, bordi tenui */
  --bf-amber-dark:      #9A6413; /* testo color ambra SU CHIARO (il sito usa #A6650D,
                                    che su bianco non arriva a 4,5:1 — qui serve per
                                    testo piccolo, quindi resta la versione scura) */
  --bf-cream:           #FDF4E7; /* fascia di sezione calda — la usa il sito */
  --bf-lavender:        #EBECF9; /* fascia/card alternativa — la usa il sito */
  --bf-lightblue:       #F0F5FA; /* sfondo box totale */
  --bf-periwinkle:      #9CA1E2; /* decori, tracciato di sfondo */
  --bf-text:            #000000; /* il corpo del sito è nero pieno */
  --bf-text-muted:      #5C5A58;
  --bf-border:          #E0E0E0; /* bordo delle card del sito */
  --bf-border-dashed:   #C9CBE6;
  --bf-error:           #B42318;
  --bf-footer:          #31302F; /* il piede del sito è grigio caldo, non navy */

  /* ---- Tipografia ----
     Il sito: Museo per i titoli, Raleway per i testi e le CTA. Due famiglie, non una. */
  --bf-font:        'Raleway', system-ui, sans-serif;         /* corpo, label, CTA, numeri */
  --bf-font-titoli: 'Museo', 'Raleway', system-ui, sans-serif; /* h1, h2, h3 */
  /* Scala del sito, misurata: h1 44px (32px nelle pagine interne) · h2 29px · h3 26px,
     tutti Museo 500, line-height 1.1, colore navy, nessun letter-spacing, mai maiuscolo.
     Corpo: Raleway 500, 16px, line-height 1.5, nero. CTA: Raleway 700, 15px, MAIUSCOLO,
     nessun letter-spacing. Menu: Raleway 500, 16px, navy, minuscolo.
     Eyebrow (nostra, non del sito): 11px / 700 / uppercase / letter-spacing .20-.22em.
     Numeri: font-variant-numeric: tabular-nums; formato italiano (229 € · 47% · 2.783). */

  /* ---- Raggi (dal sito: card 16px, bottoni 30px) ---- */
  --bf-radius-sm:   8px;   /* input, chip */
  --bf-radius-md:   12px;  /* box minori */
  --bf-radius-lg:   16px;  /* card — è il raggio delle card del sito */
  --bf-radius-xl:   16px;  /* contenitori principali, gate: stesso raggio, non più morbido */
  --bf-radius-btn:  30px;  /* bottoni: il sito li fa a pastiglia */
  --bf-radius-pill: 999px;

  /* ---- Ombre ---- */
  --bf-shadow-card:   0 2px 10px rgba(0,0,0,.10); /* è l'ombra delle card del sito */
  --bf-shadow-hover:  0 6px 18px rgba(0,0,0,.13);
  --bf-shadow-modal:  0 8px 48px rgba(0,0,0,.18);

  /* ---- Gradiente ----
     Valore ESATTO copiato dal sito (sezione newsletter della home): pesca #FFDEB1 al 14%
     che scende su periwinkle #B6BAFA al 100%, verso il basso. E l unico gradiente che il
     sito usa: non inventarne altri e non cambiare le fermate. */
  --bf-gradiente: linear-gradient(#FFDEB1 14%, #B6BAFA 100%);

  /* ---- Larghezza del contenuto ---- */
  --bf-max: 1000px; /* il contenitore del sito è 1000px: allinearsi evita lo scalino */

  /* ---- Motion ---- */
  --bf-ease: cubic-bezier(.4,0,.2,1);
  --bf-ease-out: cubic-bezier(.2,.7,.3,1);
  --bf-dur-fast: .16s;
  --bf-dur: .18s;
  --bf-dur-slow: .55s;

  /* ---- Spaziature usate ---- */
  /* sezione desktop: 46px · mobile: 30px 22px (il sito usa 40px 80px) */
  /* card: padding 26px 28px · gap form: 20-26px */
}