/* ==========================================================================
   Reibanq — Design tokens
   Unica fonte dei valori. Ogni token qui ha una controparte prevista in
   Divi 5 (Global Colors, Global Fonts, Global Presets): vedi la colonna
   "Divi" nei commenti, serve al porting.
   ========================================================================== */

/* --- Font, ospitati in locale come sul sito vero (Google Fonts disattivati) --- */
/* I due caratteri del sito, serviti da noi, piu' i loro sostituti misurati.

   Il problema che questo blocco risolve: con `font-display: swap` il browser
   disegnava subito il testo col carattere di sistema e lo ricambiava quando
   arrivava il nostro. Sui titoli lo scambio si vedeva benissimo, perche' il
   Segoe UI di Windows ha un nero molto piu' pieno di Overpass.

   Tre mosse, in ordine di importanza:

   1. `font-display: optional`. Il browser aspetta il carattere per un istante
      e, se non fa in tempo, tiene il sostituto per TUTTA la pagina invece di
      cambiarlo sotto gli occhi di chi legge. Lo scambio a meta' lettura non
      avviene piu': o si vede Overpass da subito, o non lo si vede affatto in
      quel caricamento.
   2. Il `<link rel="preload">` nel guscio. Senza, il carattere veniva scoperto
      solo dopo aver scaricato e letto questo foglio: partiva tardi e perdeva
      quasi sempre la finestra di `optional`. Col preload parte insieme ai CSS.
   3. I sostituti qui sotto. `optional` puo' comunque lasciare in campo il
      carattere di sistema: allora almeno che occupi lo stesso spazio. Le
      percentuali non sono a occhio, sono misurate su questo sito: Overpass
      grassetto sta al Segoe UI come 99,42 a 100 e ad Arial come 97,40; Open
      Sans e' piu' largo, 106,15 e 104,60. Le quote verticali vengono dal file:
      Overpass ha 2000 unita' per em con 1766 sopra la base e 766 sotto (88,3%
      e 38,3%), Open Sans 2048 con 2189 e 600 (106,9% e 29,3%).

   Le famiglie di scorta sono due per carattere perche' il sostituto vero
   cambia con la macchina: Segoe UI su Windows, Arial altrove. Se `local()`
   non trova il primo, il browser passa al secondo da solo.

   `font-weight: 100 900` sulle scorte non e' decorativo: senza, la faccia
   dichiarata vale solo per il peso normale, e per un titolo a 700 il browser
   ingrassa il chiaro per conto suo. Misurato, il titolo campione veniva 783px
   invece di 838. Con l'intervallo dichiarato prende il grassetto vero.

   Un solo `size-adjust` non puo' essere esatto a tutti i pesi: quello di
   Overpass e' misurato sul grassetto, che e' come stanno i titoli, quello di
   Open Sans sul tondo del testo corrente. */
@font-face {
  font-family: 'Overpass';
  src: url('../fonts/overpass-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/opensans-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: optional;
}

/* Le scorte, una faccia per peso. Il grassetto ha bisogno della sua: la
   faccia dichiarata `100 900` con un solo `local()` fa ingrassare al browser
   il carattere chiaro, e il grassetto sintetico e' piu' STRETTO del vero.
   Misurato su questo sito, il titolo campione veniva 783px invece di 838.
   Le percentuali qui sotto sono il rapporto misurato fra il nostro carattere
   e la scorta allo stesso peso, quindi correggono anche la sintesi. */
@font-face {
  font-family: 'Overpass scorta';
  src: local('Segoe UI'), local('SegoeUI');
  font-weight: 400;
  font-style: normal;
  size-adjust: 102.02%;
  ascent-override: 88.3%;
  descent-override: 38.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Overpass scorta';
  src: local('Segoe UI'), local('SegoeUI');
  font-weight: 500 900;
  font-style: normal;
  size-adjust: 106.73%;
  ascent-override: 88.3%;
  descent-override: 38.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Overpass scorta 2';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  font-weight: 400;
  font-style: normal;
  size-adjust: 100.72%;
  ascent-override: 88.3%;
  descent-override: 38.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Overpass scorta 2';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  font-weight: 500 900;
  font-style: normal;
  size-adjust: 105.36%;
  ascent-override: 88.3%;
  descent-override: 38.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Open Sans scorta';
  src: local('Segoe UI'), local('SegoeUI');
  font-weight: 400;
  font-style: normal;
  size-adjust: 105.88%;
  ascent-override: 106.9%;
  descent-override: 29.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Open Sans scorta';
  src: local('Segoe UI'), local('SegoeUI');
  font-weight: 500 900;
  font-style: normal;
  size-adjust: 112.73%;
  ascent-override: 106.9%;
  descent-override: 29.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Open Sans scorta 2';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  font-weight: 400;
  font-style: normal;
  size-adjust: 104.53%;
  ascent-override: 106.9%;
  descent-override: 29.3%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Open Sans scorta 2';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  font-weight: 500 900;
  font-style: normal;
  size-adjust: 111.29%;
  ascent-override: 106.9%;
  descent-override: 29.3%;
  line-gap-override: 0%;
}

:root {
  /* ---------- Colori di marca (manuale Magoot) — Divi: Global Colors ------- */
  --rb-navy: #183153;          /* Blu di Prussia   — istituzionale, titoli   */
  --rb-navy-deep: #0f2038;     /* fondo delle sezioni scure                  */
  --rb-navy-900: #0a1626;      /* footer                                     */
  --rb-orange: #e9531d;        /* Arancio Fiamma   — accento decorativo      */
  --rb-orange-deep: #c8410f;   /* stesso arancio, scurito. Dal 28/08 NON e'
                                  piu' il colore dei bottoni: D3 del 27/08
                                  vuole il #e9531d del manuale, e sui bottoni
                                  il 3,67:1 del bianco e' reso conforme dalla
                                  tipografia (19px peso 700, soglia 3:1).
                                  Resta qui perche' serve dove quella strada
                                  non c'e': ARANCIO COME TESTO PICCOLO su
                                  fondo chiaro, dove #e9531d farebbe 3,67:1
                                  contro il 4,5:1 richiesto, e fondi arancio
                                  che portano testo sotto i 19px (badge dei
                                  piani, schede, cella arancio dei bento).
                                  Su bianco fa 4,98:1. */
  --rb-orange-soft: #fdefe9;   /* velo arancio per pill e sfondi tenui       */
  --rb-orange-light: #ff8a5c;  /* arancio schiarito, l'unico leggibile COME
                                  TESTO sul fondo navy: 5,64:1 su --rb-navy e
                                  7,04:1 su --rb-navy-deep. Su bianco fa 2,32
                                  e li' non si usa mai. */

  /* Veli dell'hero scuro. Il vecchio velo bianco (opacita' 0,98) non attenuava
     la fotografia, la cancellava: era il compenso di un vincolo di Divi che non
     c'e' piu'. Questi tre passi vanno da coprente a trasparente e lasciano
     viva la meta' dove sta il soggetto. */
  --rb-veil-1: rgba(15, 32, 56, 0.94);
  --rb-veil-2: rgba(15, 32, 56, 0.76);
  --rb-veil-3: rgba(15, 32, 56, 0.34);
  --rb-veil-4: rgba(24, 49, 83, 0.12);

  /* Colori d'area, dai mockup carta ufficiali (People viola, Business teal). */
  --rb-people: #6c4bb6;
  --rb-people-soft: #f2eefb;
  --rb-business: #0e8c8c;
  --rb-business-soft: #e6f4f4;

  /* ---------- Neutri ------------------------------------------------------ */
  /* I valori del tema chiaro hanno un nome proprio perche' .rb-theme-dark
     riscrive --rb-body, --rb-muted e --rb-line: un'isola chiara dentro una
     sezione scura (il pannello di vetro sull'hero) ha bisogno di ritrovarli. */
  --rb-body-on-light: #4a5a70;   /* testo corrente, 7,1:1 su bianco */
  --rb-muted-on-light: #627184;  /* testo secondario. Era #6b7b90, che su
                                    bianco si fermava a 4,3:1 e sul fondo
                                    alternato #f6f8fb a 4,2:1, sotto la soglia
                                    AA, quasi sempre a meno di 14px. Adesso
                                    5,0:1 su bianco e 4,7:1 sull'alternato. */
  --rb-line-on-light: #e4e8ef;   /* filetti e bordi card */

  --rb-ink: #183153;           /* testo forte  */
  --rb-body: var(--rb-body-on-light);
  --rb-muted: var(--rb-muted-on-light);
  --rb-line: var(--rb-line-on-light);
  --rb-line-strong: #cfd7e2;
  --rb-surface: #ffffff;
  --rb-surface-alt: #f6f8fb;   /* sezioni chiare alternate */
  --rb-surface-warm: #faf7f4;  /* variante calda, lato People */
  --rb-on-dark: #ffffff;
  --rb-on-dark-soft: rgba(255, 255, 255, 0.74);
  --rb-on-dark-line: rgba(255, 255, 255, 0.14);

  /* ---------- Tipografia — Divi: Global Fonts + preset di titolo ---------- */
  --rb-font-display: 'Overpass', 'Overpass scorta', 'Overpass scorta 2', 'Segoe UI', Arial, sans-serif;
  --rb-font-text: 'Open Sans', 'Open Sans scorta', 'Open Sans scorta 2', 'Segoe UI', Arial, sans-serif;

  /* Scala fluida: stessi clamp() gia' in uso nei preset Divi del sito. */
  --rb-h1: clamp(2.5rem, 1.6rem + 3.9vw, 4.6875rem);   /* fino a 75px */
  --rb-h2: clamp(2rem, 1.45rem + 2.4vw, 3.4375rem);    /* fino a 55px */
  --rb-h3: clamp(1.5rem, 1.28rem + 0.95vw, 2rem);      /* fino a 32px */
  --rb-h4: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);

  /* Il titolo dentro una card non e' un titolo di sezione: sta in una colonna
     larga un terzo della pagina, non nella pagina. Con `--rb-h3` la card della
     griglia a tre colonne dava 19 caratteri per riga -- misurato a 1440px su
     una colonna di 315px -- e il titolo andava a capo tre volte. A questa
     misura ne dà 25, che è la stessa densità che la pagina ha altrove.

     Il valore non è inventato: è identico alla scala che le celle piccole del
     bento si erano già scritte addosso il 29/08 per lo stesso motivo. Da lì
     viene, e adesso vale per tutte le card invece che per quelle sei sole. */
  --rb-h3-card: clamp(1.3rem, 1.15rem + 0.5vw, 1.5rem);  /* fino a 24px */
  --rb-h5: 1.125rem;
  --rb-body-size: 1.125rem;                            /* 18px, come Divi   */
  --rb-body-lg: clamp(1.125rem, 1.03rem + 0.4vw, 1.375rem);
  --rb-small: 0.9375rem;
  --rb-eyebrow: 0.8125rem;

  --rb-lh-tight: 1.06;
  --rb-lh-head: 1.16;
  --rb-lh-body: 1.65;

  /* ---------- Ritmo verticale e larghezze -------------------------------- */
  --rb-container: 1200px;      /* Divi: et_divi['content_width'] = 1200px    */
  --rb-container-wide: 1400px;
  --rb-gutter: clamp(1.25rem, 0.9rem + 1.6vw, 2.5rem);
  --rb-section-y: clamp(4rem, 2.6rem + 5.4vw, 7.5rem);
  --rb-section-y-lg: clamp(5rem, 3rem + 7vw, 9.5rem);

  --rb-gap-xs: 0.5rem;
  --rb-gap-sm: 0.875rem;
  --rb-gap: 1.5rem;
  --rb-gap-lg: 2.5rem;
  --rb-gap-xl: 4rem;

  /* ---------- Forma ------------------------------------------------------- */
  --rb-r-sm: 8px;
  --rb-r: 16px;                /* raggio delle card, gia' in uso sul sito    */
  --rb-r-lg: 24px;
  --rb-r-xl: 32px;
  --rb-r-pill: 999px;

  /* ---------- Ombre: fredde, mai nere pure ------------------------------- */
  --rb-shadow-xs: 0 1px 2px rgba(24, 49, 83, 0.06);
  --rb-shadow-sm: 0 2px 8px rgba(24, 49, 83, 0.06);
  --rb-shadow: 0 12px 32px -12px rgba(24, 49, 83, 0.16);
  --rb-shadow-lg: 0 28px 64px -24px rgba(24, 49, 83, 0.28);
  --rb-shadow-xl: 0 48px 96px -32px rgba(15, 32, 56, 0.42);
  --rb-shadow-orange: 0 12px 28px -10px rgba(200, 65, 15, 0.45);

  /* ---------- Movimento --------------------------------------------------- */
  --rb-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rb-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  /* Uscita morbida, non caricata sull'inizio come --rb-ease: la corsa si
     distribuisce e la comparsa dei titoli si legge lenta davvero. */
  --rb-ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --rb-t-fast: 160ms;
  --rb-t: 280ms;
  --rb-t-slow: 620ms;
  /* La molla del riferimento Aceternity (stiffness 200, damping 50) non esiste
     in CSS: questa curva ne imita il rimbalzo corto, senza libreria. */
  --rb-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --rb-spring-t: 380ms;

  /* ---------- Header ------------------------------------------------------ */
  --rb-header-h: 84px;         /* stato di partenza  */
  --rb-header-h-sticky: 68px;  /* dopo lo scroll     */
  /* Da stretta l'header e' una pastiglia larga quanto il contenuto: sei voci,
     la lingua e i due bottoni non stanno in meno di 1200px. Il 40% del
     riferimento vale per una barra da quattro link, qui la barra cambia forma
     (si stacca, si arrotonda, va in vetro) ma non larghezza. */
  --rb-header-w-sticky: min(100% - (var(--rb-gutter) * 2), var(--rb-container));
  /* 8px = (84 - 68) / 2: la pastiglia si accorcia in modo simmetrico, quindi
     il centro del contenuto resta dov'era e nell'header non si muove niente
     in verticale. Cambiando una delle due altezze va rifatto il conto. */
  --rb-header-float: 8px;
  --rb-z-header: 200;
  --rb-z-mega: 190;
  --rb-z-drawer: 250;
}

/* Il tema di sezione: ogni sezione dichiara il proprio contesto di colore e
   i componenti dentro si adeguano da soli, senza classi "-on-dark" sparse. */
.rb-theme-dark {
  --rb-ink: var(--rb-on-dark);
  --rb-body: var(--rb-on-dark-soft);
  --rb-muted: rgba(255, 255, 255, 0.58);
  --rb-line: var(--rb-on-dark-line);
  --rb-line-strong: rgba(255, 255, 255, 0.24);
  --rb-surface: rgba(255, 255, 255, 0.04);
  color: var(--rb-on-dark);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --rb-t-fast: 1ms;
    --rb-t: 1ms;
    --rb-t-slow: 1ms;
    --rb-spring-t: 1ms;
  }
}