/* Token di design condivisi Ogigia.
   ---------------------------------------------------------------------------
   Estratti alla terza pagina che ha richiesto un trattamento su misura
   (in-abbonamento, home con hero video, certificazione): i valori qui sotto
   erano gia' duplicati alla lettera fra css/in-abbonamento.css e
   css/hero-video.css, e questo file li rende una fonte sola.

   Questo file NON cambia nulla di quello che c'e' gia': dichiara solo
   variabili su :root, non ridefinisce nessuna regola esistente. I due file
   piu' vecchi continuano a usare i propri --abb-* e --hero-video-* con i
   valori scritti a mano; sostituirli con questi token e' un refactor
   separato, deliberatamente fuori da questo giro.

   Va caricato PRIMA degli altri CSS di pagina — nei template si usa
   `assets.addCss('theme://css/ogigia-tokens.css', 20)`: in Grav la priorita'
   piu' alta viene stampata per prima (Assets.php:436). */

:root {

  /* ---------- colore: il nucleo gia' condiviso ---------- */
  /* Presenti identici in entrambi i file di partenza. */

  --og-cream:            #F4F1EE;              /* --abb-cream + --hero-video-cream */
  --og-dark:             #2A2E35;              /* --abb-dark + --hero-video-dark */
  --og-white:            #FFFFFF;              /* --abb-white + --hero-video-text */

  --og-veil:             rgba(42, 46, 53, 0.72);  /* velo scuro sopra il video */
  --og-veil-strong:      rgba(42, 46, 53, 0.8);   /* stesso velo sotto i 640px */
  --og-text-shadow:      rgba(0, 0, 0, 0.45);     /* ombra dei titoli su video */

  --og-on-dark-lead:     #D7DBE2;              /* testo di servizio su fondo scuro */
  --og-on-dark-eyebrow:  #BFD8FA;              /* occhiello su fondo scuro */

  /* ---------- colore: identita' ---------- */
  /* Finora vivevano solo in in-abbonamento.css, ma sono i colori del marchio:
     promossi a token perche' servono a qualunque pagina nuova. */

  --og-blue:             #3085EE;
  --og-blue-dark:        #185FA5;
  --og-blue-pale:        #E6F1FB;              /* fondo delle pillole */
  --og-muted:            #6B7280;              /* testo secondario su chiaro */
  --og-line:             #E4DFD8;              /* bordi e separatori */

  /* ---------- struttura ---------- */

  --og-measure:          640px;   /* larghezza della colonna di lettura */
  --og-gutter:           24px;    /* respiro orizzontale della colonna */
  --og-section-y:        56px;    /* ritmo verticale delle fasce (vedi @media) */

  /* ---------- tipografia ---------- */
  /* La scala dei font-size resta volutamente fuori: oggi e' una nuvola di
     valori a mezzo pixel (13.5, 14, 14.5, 15, 15.5, 16.5, 17...) senza una
     progressione, e trasformarla in token la fisserebbe cosi' com'e'.
     Va prima razionalizzata, ed e' un lavoro a se'. */

  --og-weight-bold:      700;
  --og-leading-body:     1.6;     /* testo corrente */
  --og-leading-tight:    1.55;    /* testo dentro card ed elenchi */
  --og-track-eyebrow:    0.08em;  /* maiuscoletto spaziato */
  --og-track-display:    -0.01em; /* titoli grandi, leggermente stretti */
  --og-size-eyebrow:     12.5px;
}

/* Il ritmo verticale si stringe sul mobile. Si ridefinisce la stessa
   variabile invece di aggiungerne una seconda: chi la consuma scrive
   `var(--og-section-y)` e basta, senza doversi ricordare quale usare dove. */
@media (max-width: 640px) {
  :root { --og-section-y: 44px; }
}

/* NOTA sul breakpoint: 640px e' l'unico punto di rottura di tutto il lavoro
   fatto finora, ma NON puo' diventare una variabile utile. Le custom property
   non sono ammesse dentro le @media: `@media (max-width: var(--og-bp-mobile))`
   non viene applicata da nessun browser. Il valore va quindi ripetuto a mano
   in ogni media query — resta scritto qui come riferimento, per non doverlo
   andare a cercare, ma va copiato, non referenziato.

   --og-bp-mobile = 640px  */