/* =========================================================================
   BASE — token, azzeramento, tipografia della cornice.
   La cornice (barre, comandi, indice) è volutamente silenziosa: le uniche
   cose colorate in scena devono essere le tavole.
   ========================================================================= */

:root {
  /* palette campionata dalle tavole stesse */
  --carta:      #efeee7;
  --rosso:      #b92331;
  --inchiostro: #0b0b0b;

  /* scena */
  --scena-fondo: #0d0d0d;
  --scena-alone: #171717;

  --testo:      rgba(239, 238, 231, 0.92);
  --testo-lieve: rgba(239, 238, 231, 0.46);
  --linea:      rgba(239, 238, 231, 0.12);

  /* cornice: altezze fisse, entrano nel calcolo dell'area utile */
  --alta:  clamp(46px, 6vh, 58px);
  --bassa: clamp(58px, 8vh, 72px);

  /* respiro attorno alle tavole (mai in percentuale: deve essere prevedibile) */
  --respiro-x: clamp(12px, 3vw, 56px);
  --respiro-y: clamp(10px, 2.2vh, 28px);

  /* curve di movimento */
  --morbida: cubic-bezier(0.22, 0.61, 0.36, 1);
  --editoriale: cubic-bezier(0.65, 0.02, 0.24, 1);

  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--scena-fondo);
  color: var(--testo);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

body { overflow: hidden; }

img { display: block; max-width: 100%; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

svg {
  width: 1em; height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

kbd {
  font-family: var(--mono);
  font-size: 0.85em;
  border: 1px solid var(--linea);
  border-radius: 3px;
  padding: 0.05em 0.35em;
}

::selection { background: var(--rosso); color: var(--carta); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}