/* Le fondamenta comuni del sito e della documentazione: i caratteri, i colori,
 * il comportamento di base. Due fogli lo usano — `sito.css` per la pagina,
 * `docs/docs.css` per i capitoli — e nessuno dei due ridefinisce questi token.
 *
 * I caratteri sono quelli dell'app (Geist, Geist Mono, Bricolage Grotesque, SIL
 * OFL 1.1, `font/OFL.txt`), serviti da qui e non da un CDN: il sito non fa
 * richieste ad altri domini, come il programma. Le `@font-face` sono le stesse
 * di `apps/desktop/src/stile.css`, con gli stessi `unicode-range`: il file
 * «latin-ext» si scarica solo per i caratteri che lo chiedono.
 *
 * I colori sono quelli della skin Plain, la predefinita
 * (`core/rymembra-skin/skins/plain.json`): chi arriva dal sito apre un programma
 * che ha già visto. */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./font/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./font/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./font/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./font/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('./font/bricolage-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('./font/bricolage-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  --notte: #09090d;
  --sup-1: #0e0e14;
  --sup-2: #16161f;
  --sup-3: #1e1e2a;
  --linea: rgba(255, 255, 255, 0.08);
  --linea-forte: rgba(255, 255, 255, 0.16);
  --t1: #f2f2f7;
  --t2: rgba(242, 242, 247, 0.68);
  --t3: rgba(242, 242, 247, 0.5);
  --viola: #8b7cf6;
  --viola-chiaro: #b3a8ff;
  --viola-tenue: rgba(139, 124, 246, 0.16);
  --ciano: #4fd6e0;
  --ciano-tenue: rgba(79, 214, 224, 0.14);
  --pericolo: #ec5d5e;
  --ok: #34d399;

  --sans: Geist, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --titoli: "Bricolage Grotesque", Geist, system-ui, sans-serif;

  --raggio: 14px;
  --raggio-piccolo: 8px;
  --uscita: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--sup-3) var(--notte);
}
body {
  margin: 0;
  background: var(--notte);
  color: var(--t1);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: var(--viola-chiaro);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover {
  color: var(--t1);
}
:focus-visible {
  outline: 2px solid var(--ciano);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection {
  background: rgba(139, 124, 246, 0.4);
  color: #fff;
}
[hidden] {
  display: none !important;
}
code {
  font: 400 0.9em/1 var(--mono);
}

/* Il collegamento per saltare al contenuto: invisibile finché non lo si raggiunge con Tab. */
.salta {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 99px;
  background: var(--t1);
  color: var(--notte);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
}
.salta:focus-visible {
  transform: none;
}

/* Fra una pagina e l'altra dello stesso sito, dove il browser lo sa fare: la
   testata resta dov'è, la pagina vecchia si sfoca e sparisce, la nuova sale e
   si mette a fuoco. Dove il browser non lo sa fare, la pagina si carica e basta.
   Il consenso (`@view-transition`) sta in uno `<style>` in testa a ogni pagina:
   il browser lo cerca prima di mostrare la pagina nuova, e un foglio esterno
   può non essere ancora arrivato. */
.testata,
.top {
  view-transition-name: testata;
}
::view-transition-old(root) {
  animation: vt-esce 0.28s ease both;
}
::view-transition-new(root) {
  animation: vt-entra 0.6s var(--uscita) both;
}
@keyframes vt-esce {
  to {
    opacity: 0;
    filter: blur(8px);
  }
}
@keyframes vt-entra {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(18px);
  }
}