/* Registro Accademico — stili condivisi da tutte le pagine */

:root {
  /* Neutri */
  --ink: #101820;
  --text: #2e3742;
  --text-soft: #4a5461;
  --muted: #8b8778;
  --muted-cool: #7b8492;
  --bg: #ffffff;
  --bg-alt: #f7f6f3;

  /* Bordi */
  --line: #e6e3dc;
  --line-soft: #ece9e2;
  --line-mid: #d9d5cb;
  --line-input: #cfcbc1;
  --line-inline: #ddd9d0;

  /* Accenti */
  --yellow: #ffed00;
  --red: #e1251b;
  --blue: #1c9ad6;
  --green: #1d7a3e;
  --orange: #f2a020;

  /* Su fondo scuro */
  --on-dark: #e9e7e1;
  --on-dark-muted: #8b96a3;
  --on-dark-faint: #66707c;
  --dark-rule: #26313d;
  --dark-link-rule: #34404d;

  /* Il margine laterale, scritto una volta sola.
   *
   * La colonna del contenuto è larga al massimo `--colonna` e ha `--respiro` ai
   * lati: è la geometria di `.hero`, che con `max-width` e `margin: 0 auto` la
   * ottiene da sé. Testata e piede non possono fare lo stesso — il loro fondo
   * deve arrivare ai bordi della finestra — e la ricalcolano con la sola
   * imbottitura: `--bordo` aggiunge al respiro la metà di quanto la finestra
   * eccede la colonna. Con `1470px` fanno tutti e tre `79px`; sotto i `1440px`
   * il primo addendo è zero e restano i soli `--respiro`.
   *
   * Prima erano tre numeri diversi impilati sulla stessa colonna — testata 54,
   * contenuto 79, piede 64 — e il bordo sinistro faceva due scalini scendendo. */
  --colonna: 1440px;
  --respiro: clamp(24px, 5vw, 64px);
  --bordo: calc(max(0px, 100% - var(--colonna)) / 2 + var(--respiro));
}

* { box-sizing: border-box; }

html,
body { margin: 0; padding: 0; }

body {
  font-family: 'Jost', 'Century Gothic', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--ink); }

/* `textarea` e `select` non sono un'aggiunta di comodo: senza, il browser mette
 * il monospazio ai textarea, e l'appello è la prima pagina dell'app che ne ha uno.
 * L'admin era già coperto per conto suo, in `gestione.css`. */
input, textarea, select, button { font-family: inherit; }

::selection { background: var(--yellow); color: var(--ink); }

/* Etichetta in maiuscoletto spaziato */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Pulsante giallo con ombra piena all'hover */
.btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  background: var(--yellow);
  color: var(--ink);
  font-size: 13px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  text-align: center;
  padding: 15px clamp(22px, 5vw, 30px);
  transition: transform .18s ease, box-shadow .18s ease;
}

.btn:hover {
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  transform: translate(-2px, -2px);
}

.btn--lg { padding: 20px 42px; }

.btn--lg:hover {
  box-shadow: 7px 7px 0 var(--ink);
  transform: translate(-3px, -3px);
}

/* Quadratini colorati dell'identità visiva */
.dots { display: flex; align-items: center; gap: 9px; }
.dots span { display: block; width: 9px; height: 9px; }
.dot--orange { background: var(--orange); }
.dot--blue   { background: var(--blue); }
.dot--green  { background: var(--green); }
.dot--red    { background: var(--red); }