/* ==========================================================================
   Rossana Isola — brand.css
   Variabili e stili di base del brand per rossanaisola.ch
   Versione 1.0 · ottobre 2026
   Regola d'oro: mai bianco puro (#FFF) né nero puro (#000). Usare Luna e Notte.
   ========================================================================== */

/* ---------- Font (ospitati sul sito, licenza SIL OFL 1.1) ---------- */
/* I file .woff2 stanno nella cartella fonts/ accanto a questo file. */
@font-face {
  font-family: "Libre Baskerville";
  src: url("fonts/libre-baskerville-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Libre Baskerville";
  src: url("fonts/libre-baskerville-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Palette Aurora ---------- */
  /* Blu */
  --ri-notte:    #0E1A30;
  --ri-indaco:   #1F3768;
  --ri-cobalto:  #2D5A96;
  --ri-mare:     #3B7BB8;
  --ri-acciaio:  #6E8DB3;
  --ri-cielo:    #A7C1DE;
  /* Violetti */
  --ri-prugna:   #33285A;
  --ri-malva:    #9C7FA0;
  --ri-lilla:    #C3B4E6;
  --ri-foschia:  #A9AFCF;
  /* Verdi */
  --ri-abete:    #12443C;
  --ri-bosco:    #2E5B40;
  --ri-muschio:  #5A7745;
  --ri-salvia:   #8C9A88;
  /* Neutri */
  --ri-ghiaccio: #E4EAF1;
  --ri-luna:     #F4F2EC;

  /* ---------- Ruoli ---------- */
  --colore-testo:        var(--ri-notte);   /* sostituisce il nero */
  --colore-pagina:       var(--ri-luna);    /* sostituisce il bianco */
  --colore-link:         var(--ri-indaco);
  --colore-link-hover:   var(--ri-notte);
  --colore-focus:        var(--ri-notte);
  --colore-bordo:        #CFCABB;           /* Luna scurita, per linee sottili */

  /* ---------- Tipografia ---------- */
  --font-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-sans:  "Atkinson Hyperlegible", Verdana, "Segoe UI", sans-serif;

  /* Scala fluida: mobile → desktop */
  --testo-xs:   0.875rem;                               /* 14px – note, etichette */
  --testo-s:    1rem;                                   /* 16px – minimo per testo corrente */
  --testo-m:    1.125rem;                               /* 18px – testo corrente */
  --testo-l:    clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); /* 20–24px – frasi, intro */
  --titolo-3:   clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --titolo-2:   clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --titolo-1:   clamp(2.25rem, 1.6rem + 3vw, 3.75rem);

  --interlinea-testo:  1.6;
  --interlinea-titoli: 1.15;
  --spaziatura-etichette: 0.2em;   /* maiuscolo spaziato, come CONSULTANT & COACH */

  /* ---------- Spazi, forme, misure ---------- */
  --spazio-1: 0.25rem;
  --spazio-2: 0.5rem;
  --spazio-3: 1rem;
  --spazio-4: 1.5rem;
  --spazio-5: 2rem;
  --spazio-6: 3rem;
  --spazio-7: 4.5rem;
  --spazio-8: 6rem;

  --raggio-s: 6px;
  --raggio-m: 10px;
  --raggio-l: 16px;

  --larghezza-testo: 65ch;
  --larghezza-pagina: 72rem;
}

/* ---------- Base ---------- */
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--colore-pagina);
  color: var(--colore-testo);
  font-family: var(--font-sans);
  font-size: var(--testo-m);
  line-height: var(--interlinea-testo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;            /* Baskerville mai in grassetto */
  line-height: var(--interlinea-titoli);
  margin: 0 0 var(--spazio-3);
  text-wrap: balance;
}
h1 { font-size: var(--titolo-1); }
h2 { font-size: var(--titolo-2); }
h3 { font-size: var(--titolo-3); }
h4, h5, h6 { font-family: var(--font-sans); font-weight: 700; font-size: var(--testo-m); }

p { max-width: var(--larghezza-testo); text-wrap: pretty; }
strong, b { font-weight: 700; }

/* Frasi dei servizi e citazioni: Baskerville corsivo */
.frase, blockquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--testo-l);
  line-height: 1.45;
}

/* Etichette in maiuscolo spaziato (mai per frasi intere) */
.etichetta {
  font-family: var(--font-sans);
  font-size: var(--testo-xs);
  text-transform: uppercase;
  letter-spacing: var(--spaziatura-etichette);
}

/* ---------- Link e focus ---------- */
a {
  color: var(--colore-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--colore-link-hover); text-decoration-thickness: 2px; }
:focus-visible {
  outline: 3px solid var(--colore-focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Pulsanti ---------- */
.pulsante {
  display: inline-flex; align-items: center; gap: var(--spazio-2);
  padding: 0.75em 1.5em;
  border-radius: var(--raggio-s);
  font-family: var(--font-sans); font-weight: 700; font-size: var(--testo-s);
  text-decoration: none; cursor: pointer;
  border: 2px solid var(--ri-notte);
  background: var(--ri-notte); color: var(--ri-luna);
  transition: background-color .15s ease, color .15s ease;
}
.pulsante:hover { background: var(--ri-indaco); border-color: var(--ri-indaco); color: var(--ri-luna); }
.pulsante--secondario { background: transparent; color: var(--ri-notte); }
.pulsante--secondario:hover { background: var(--ri-notte); color: var(--ri-luna); }

/* ---------- Temi di sezione (fondi principali) ----------
   Mettere la classe sulla <section>. Ogni tema imposta fondo, testo e link
   rispettando il contrasto minimo WCAG AA (4,5:1 per il testo corrente). */
.tema-luna     { background: var(--ri-luna);     color: var(--ri-notte); --colore-link: var(--ri-indaco); }
.tema-ghiaccio { background: var(--ri-ghiaccio); color: var(--ri-notte); --colore-link: var(--ri-indaco); }
.tema-cielo    { background: var(--ri-cielo);    color: var(--ri-notte); --colore-link: var(--ri-notte); }
.tema-foschia  { background: var(--ri-foschia);  color: var(--ri-notte); --colore-link: var(--ri-notte); }
.tema-salvia   { background: var(--ri-salvia);   color: var(--ri-notte); --colore-link: var(--ri-notte); } /* solo Notte */
/* Mare: contrasto 4,0 con Luna → solo titoli grandi (≥24px), simbolo, fasce decorative.
   Niente testo corrente, link o pulsanti piccoli su Mare. */
.tema-mare     { background: var(--ri-mare);     color: var(--ri-luna);  --colore-link: var(--ri-luna); --colore-focus: var(--ri-luna); }
/* Fondo scuro per footer o sezioni d'impatto */
.tema-notte    { background: var(--ri-notte);    color: var(--ri-ghiaccio); --colore-link: var(--ri-ghiaccio); --colore-link-hover: var(--ri-luna); --colore-focus: var(--ri-ghiaccio); }
.tema-notte .pulsante { background: var(--ri-luna); color: var(--ri-notte); border-color: var(--ri-luna); }
.tema-notte .pulsante:hover { background: var(--ri-ghiaccio); border-color: var(--ri-ghiaccio); }

/* ---------- Utilità ---------- */
.contenitore { max-width: var(--larghezza-pagina); margin-inline: auto; padding-inline: var(--spazio-4); }
.sezione { padding-block: var(--spazio-7); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }