/* ============================================================
   tokens.css — il PRIMO strato, non il quarto (02/10/2026).

   Caricato prima di app.css e restyle.css nelle tre basi. I due strati
   vecchi restano com'erano: le pagine si spostano qui una per volta, e
   quei due si svuotano man mano invece di crescere. /agenzie/ e' la prima.

   PERCHE' I TOKEN STANNO ANCHE SU .sistema. Sette nomi esistono gia' nel
   :root dei vecchi strati con altri valori (--ink, --ink-2, --ink-3, --line,
   --line-2, --serif, --sans). Quelli si caricano dopo e sul :root vincono
   loro: una pagina nuova vedrebbe il --ink di restyle.css. Dentro un
   elemento .sistema invece valgono questi, e fuori non cambia niente. Una
   pagina spostata avvolge il suo contenuto in .sistema; quando i vecchi
   strati non definiranno piu' quei nomi, basta il :root.

   LE QUATTRO REGOLE DEL SISTEMA
   1. Terracotta sulla carta, ottone sull'inchiostro. Su --ink il --rust e'
      2,1:1 e non si usa mai: l'accento scuro e' --brass-2.
   2. L'angolo tagliato (.taglio) e' la forma-firma. Su mobile si annulla.
   3. Enfasi per colore, non per corsivo: il corsivo resta solo sulla home.
   4. Un movimento solo: il dossier dell'hero che entra dal basso.

   Nessun colore scritto a mano fuori da qui: le trasparenze della carta
   sull'inchiostro sono token anche loro.
   ============================================================ */

:root, .sistema {
  --ink: #16110D;   --ink-2: #1E1711;   --ink-3: #120E0A;
  --paper: #F4EFE4; --paper-2: #FBF8F1; --paper-3: #FAF7F0;
  --rust: #9E3B2B;  --rust-2: #7B2B1E;
  --brass: #B8863B; --brass-2: #D9B771;
  --testo: #3D362E; --testo-2: #5A5146; --testo-3: #8B8275;
  --line: #DED5C2;  --line-2: #E6DECB;  --line-scura: rgba(244,239,228,.16);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Hanken Grotesk', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, monospace;
  --gutter: 48px; --taglio: 46px;

  /* la carta sull'inchiostro, per trasparenza */
  --carta-testo: rgba(244,239,228,.74);
  --carta-04: rgba(244,239,228,.04);
  --carta-05: rgba(244,239,228,.05);
  --carta-20: rgba(244,239,228,.2);
  --carta-28: rgba(244,239,228,.28);
  --ombra-oggetto: 0 60px 120px -52px rgba(0,0,0,.8);

  /* i segnaposto della mappa (03/10/2026). Il motore li scrive in
     JavaScript per Leaflet, che non legge le variabili CSS; qui stanno per
     la legenda, e test_mappa_occasioni controlla che i due restino uguali. */
  --mappa-affare: #2E7D4F; --mappa-lavori: #C8821E;
  --mappa-poco: #9aa7bd;   --mappa-anonimo: #5B7FA6;

  /* la scheda immobile (06/10/2026). Le etichette sulla fascia scura: la
     data d'asta in ottone, lo stato libero in verde, occupato e abusi in un
     rosso chiaro (il --rust sull'inchiostro e' 2,1:1, regola 1). I testi
     stanno sopra 7:1 sul --ink. */
  --carta-88: rgba(244,239,228,.88);
  --tag-asta-fondo: rgba(217,183,113,.14);   --tag-asta-bordo: rgba(217,183,113,.45);   --tag-asta-testo: #E5C98C;
  --tag-libero-fondo: rgba(132,196,142,.16); --tag-libero-bordo: rgba(132,196,142,.45); --tag-libero-testo: #A9DDB2;
  --tag-allarme-fondo: rgba(194,84,63,.18);  --tag-allarme-bordo: rgba(194,84,63,.55);  --tag-allarme-testo: #F2B8AA;
  /* la mini-mappa della scheda: Leaflet li legge con getComputedStyle */
  --mappa-zona: #16110D; --mappa-punto: #5B7FA6; --mappa-punto-bordo: #FBF8F1;
}

/* ---------- base del sistema ---------- */
.sistema { font-family: var(--sans); color: var(--testo); background: var(--paper); }
.sistema h1, .sistema h2, .sistema h3 { font-family: var(--serif); font-weight: 500; color: var(--ink); margin: 0; }
.sistema h1 { font-size: 76px; line-height: .98; letter-spacing: -.03em; }
.sistema h2 { font-size: 52px; line-height: 1.04; letter-spacing: -.026em; }
.sistema p { font-size: 17.5px; line-height: 1.65; margin: 0; }
/* regola 3: enfasi per colore. Sulla carta terracotta, sull'inchiostro ottone. */
.sistema em { font-style: normal; color: var(--rust); }
.sistema .scuro em { color: var(--brass-2); }

/* ---------- impaginazione ---------- */
.fascia { padding: 110px var(--gutter); }
.contenitore { max-width: 1240px; margin: 0 auto; }
.griglia-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
.griglia-12.in-alto { align-items: start; }
.col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; }

/* ---------- superfici ---------- */
.carta   { background: var(--paper); }
.carta-3 { background: var(--paper-3); }
.scuro   { background: var(--ink); color: var(--carta-testo); }
.sistema .scuro h1, .sistema .scuro h2, .sistema .scuro h3 { color: var(--paper); }
.sistema .scuro p { color: var(--carta-testo); }
/* regola 2: la forma-firma. --taglio si cambia sul singolo elemento. */
.taglio { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--taglio)), calc(100% - var(--taglio)) 100%, 0 100%); }
.sistema .riquadro { background: var(--paper-2); border: 1px solid var(--line); padding: 32px; }
.sistema .scuro .riquadro { background: var(--carta-04); border-color: var(--line-scura); }
/* Un oggetto di carta posato sull'inchiostro (il dossier dell'hero): dentro
   valgono di nuovo le regole della carta. Senza, .scuro .etichetta lo
   colorava d'ottone: 1,81:1 sul --paper-2 (misurato il 02/10/2026). */
.sistema .riquadro.taglio {
  /* clip-path taglia anche il bordo: sulla diagonale non c'e' linea e
     l'angolo resta aperto. La diagonale si ridisegna in fondo a destra. */
  background: linear-gradient(to top left, transparent calc(50% - .5px), var(--line) calc(50% - .5px),
                var(--line) calc(50% + .5px), transparent calc(50% + .5px)) right bottom / var(--taglio) var(--taglio) no-repeat,
              var(--paper-2);
}
/* le pagine del sistema decidono da se' lo spazio prima del footer: il
   margin-top di 80 px di app.css lasciava una striscia di carta fra
   l'ultima fascia scura e il footer */
.sistema + footer.site { margin-top: 0; }
.scuro .su-carta { color: var(--testo); }
.scuro .su-carta .etichetta, .sistema .scuro .su-carta em { color: var(--rust); }

/* ---------- testi ---------- */
.etichetta { font-family: var(--mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--rust); }
.scuro .etichetta { color: var(--brass-2); }
.cifra { font-family: var(--serif); font-size: 62px; line-height: .95; letter-spacing: -.02em; color: var(--ink); }

/* ---------- pulsanti ---------- */
.pulsante { display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-size: 15px; font-weight: 600; text-decoration: none;
  padding: 15px 26px; min-height: 48px; border: 0; cursor: pointer; }
.pulsante-ottone { background: var(--brass-2); color: var(--ink); }
.pulsante-ottone:hover { background: var(--paper); }
.pulsante-carta { background: var(--paper); color: var(--ink); }
.pulsante-carta:hover { background: var(--brass-2); }
.link-sottolineato { color: inherit; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.sistema .scuro .link-sottolineato { color: var(--paper); }

/* ---------- regola 4: un movimento solo ---------- */
@keyframes entra-dal-basso { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .entra { animation: entra-dal-basso .9s cubic-bezier(.2,.7,.3,1) both; }
}

/* ---------- telefono: una colonna, il margine unico del passo 5 ---------- */
@media (max-width: 600px) {
  .griglia-12 { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .col-5, .col-6, .col-7 { grid-column: 1 / -1; }
  .fascia { padding-top: 72px; padding-bottom: 72px; }
  /* !important qui e solo qui: il blocco mobile storico di app.css mette
     h1 e h2 a 1.7rem e 1.35rem con !important, e i vecchi strati non si
     toccano. A pari !important vince .sistema h1, piu' specifico. */
  .sistema h1 { font-size: 44px !important; }
  .sistema h2 { font-size: 32px !important; }
  .cifra { font-size: 48px; }
  .taglio { clip-path: none; }
  .sistema .riquadro.taglio { background: var(--paper-2); }
}