/* ⚠️ GENERATO da `npm run site:build` (tokens.css + base.css).
 * Non si modifica qui — la prossima build lo riscrive senza dire niente.
 * Il brand si cambia in design-system/tokens.css, che è la sorgente. */

/* MOOR — INTONACO · i token del brand.
 *
 * ⚠️⚠️ QUESTA È LA SORGENTE. I valori esistono qui e in nessun altro posto.
 * Due consumatori li leggono, e nessuno dei due li ridichiara:
 *   1. il sito   — `npm run site:build` concatena questo file + site-src/css/base.css
 *                  e scrive site/assets/css/design-system.css (GENERATO, non si tocca).
 *   2. Claude Design — `npm run design-system` costruisce le schede da questo file.
 *
 * ⚠️ NON è più `design/estratto/design-system.css`. Fino al 2026-08-12 il design system
 * NASCEVA dall'export di Claude Design: `estrai-design.mjs` lo generava e il build lo copiava.
 * In quell'assetto un brand non può vivere, perché ogni riesportazione lo sovrascrive senza
 * dare errore. Da qui in poi il rapporto è invertito: Design disegna, il repo possiede.
 *
 * ⚠️ I NOMI SONO UN CONTRATTO. site-src/css/pagina.css usa questi 46 token per nome:
 * rinominarne o toglierne uno rompe il sito in silenzio (CSS non fallisce, sbiadisce).
 * Aggiungerne è sicuro. Cambiarne il VALORE è il modo previsto di cambiare il brand.
 *
 * Territorio: Intonaco — il brand è una superficie, non un colore. Calce e grafite fanno
 * da cornice neutra ai pastello delle stanze (salvia, cobalto, terracotta), che NON entrano
 * qui: quattro camere di colori diversi devono stare nella stessa pagina senza sembrare un
 * campionario. → docs/moor-os-contesto.md §14
 */

:root {
  /* ── ruoli ─────────────────────────────────────────────────────────────── */
  --color-bg:            #F7F3EE; /* calce — fondo unico, schermo e carta */
  --color-surface:       #FFFFFF; /* card, form, moduli sollevati dal fondo */
  --color-text:          #23201C; /* grafite — testo e nero di stampa */
  --color-accent:        #874220; /* cotto — AZIONE: solo «prenota» e il prezzo attivo */
  --color-accent-2:      #455F4D; /* alloro — CONTATTO: sempre outline, mai pieno */
  --color-divider:       #DAD3CB; /* sabbia — filetti. ⚠️ mai il bordo di un controllo */

  /* ── neutrali: calce → grafite ─────────────────────────────────────────── */
  --color-neutral-100:   #F7F3EE;
  --color-neutral-200:   #EBE5DF;
  --color-neutral-300:   #DAD3CB;
  --color-neutral-400:   #C1B9B0;
  --color-neutral-500:   #A39A90;
  --color-neutral-600:   #7F776F; /* 3,98:1 sul fondo — il MINIMO per un bordo di controllo */
  --color-neutral-700:   #5D5750; /* 6,46:1 — il più chiaro ammesso per il testo */
  --color-neutral-800:   #3E3A35;
  --color-neutral-900:   #23201C;

  /* ── accento: cotto minerale ───────────────────────────────────────────── */
  --color-accent-100:    #FFE7D0;
  --color-accent-200:    #FFD5B8;
  --color-accent-300:    #FFBE9A;
  --color-accent-400:    #FDA075;
  --color-accent-500:    #E37B49;
  --color-accent-600:    #B45E34;
  --color-accent-700:    #874220; /* = --color-accent */
  --color-accent-800:    #5D290F;
  --color-accent-900:    #391402;

  /* ── accento 2: alloro ─────────────────────────────────────────────────── */
  --color-accent-2-100:  #E6F9EC;
  --color-accent-2-200:  #D5EEDC;
  --color-accent-2-300:  #BFDDC8;
  --color-accent-2-400:  #A1C5AC;
  --color-accent-2-500:  #7EA78B;
  --color-accent-2-600:  #61826C;
  --color-accent-2-700:  #455F4D; /* = --color-accent-2 */
  --color-accent-2-800:  #2C4032;
  --color-accent-2-900:  #16241B;

  /* ── tipografia ────────────────────────────────────────────────────────── */
  /* ⚠️ I 100-400 delle due rampe sono SUPERFICI, mai testo: accent-300 sul fondo fa 1,6:1. */
  --font-heading:        "EB Garamond", Garamond, "Times New Roman", serif;
  --font-heading-weight: 600;
  --font-body:           "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  /* ⚠️ Fuori dal contratto originale, aggiunto qui: nel sistema il monospazio è il carattere
     dei DATI — password, codici, quote, numeri di camera. Prima era una pila `ui-monospace`
     ripetuta a mano in dodici punti di pagina.css. */
  --font-mono:           "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── spazio: scala 4px ─────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── raggi: quasi nulli, è muro e non plastica ─────────────────────────── */
  /* ⚠️ Il sistema Organic da cui veniamo forzava `border-radius: 999px` su bottoni, tag,
     input e segmented: una pillola in un sistema squadrato legge come un residuo. Quella
     regola è stata tolta da base.css — se ricompare, viene da un export. */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 6px;

  /* ── ombre: diffuse e calde, luce alta ─────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(35, 32, 28, .06);
  --shadow-md: 0 2px 8px rgba(35, 32, 28, .08);
  --shadow-lg: 0 12px 32px rgba(35, 32, 28, .10);
}

/* MOOR — lo strato base: i font e gli elementi, costruiti sui token.
 *
 * ⚠️ I VALORI NON STANNO QUI. Stanno in design-system/tokens.css, che è la sorgente.
 * `npm run site:build` concatena i due file e scrive site/assets/css/design-system.css:
 * quel file è GENERATO e non si modifica — la prossima build lo riscrive senza dire niente.
 *
 * Da dove viene: è il portato di design/estratto/design-system.css (righe 138-338), cioè
 * lo strato base del sistema «Organic» che il bundle di Claude Design generava. Il sito lo
 * usa davvero — .btn, .card, .input, .field, .elev-*, .washed sono in pagina.html — quindi
 * è stato TRASPORTATO e non riscritto. Tre cose sono cambiate, e sono elencate sotto.
 */

/* ══ i font ═════════════════════════════════════════════════════════════════
   ⚠️ AUTO-OSPITATI, e la ragione non è la velocità: un `<link>` a fonts.googleapis.com è
   una TERZA PARTE che vede l'IP dell'ospite, e va nell'informativa privacy insieme
   all'iframe di Smoobu e ai tile di OpenStreetMap. Due terze parti sono già da dichiarare;
   la terza era evitabile a costo zero. I woff2 arrivano da fonts.gstatic.com, licenza SIL
   OFL 1.1 per entrambe le famiglie, e stanno in git: il deploy non chiama nessuno.

   ⚠️ EB Garamond e IBM Plex Sans sono VARIABILI: un file per subset copre tutti i pesi,
   e per questo si dichiarano con un intervallo (`font-weight: 400 700`) invece che con un
   @font-face per peso. IBM Plex Mono no: 400 e 500 sono due file distinti.

   ⚠️ `latin-ext` NON si scarica per un visitatore italiano, inglese, francese, tedesco o
   spagnolo: gli accenti di quelle lingue stanno tutti in `latin`. Lo tira giù solo una
   pagina che contenga davvero un carattere dell'Europa centrale. È il motivo per cui i
   112 KB di eb-garamond-var-latin-ext non sono 112 KB di pagina. */

@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/eb-garamond-var-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: 'EB Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/fonts/eb-garamond-var-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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-var-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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-sans-var-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-400-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-400-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-500-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-500-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;
}

/* @@FINE-FONT@@ — ⚠️ SENTINELLA, non toglierla. `costruisci-sito.mjs` taglia qui per
   costruire site/assets/css/tokens.css: token + soli @font-face, zero regole di elemento.
   Serve a mappa.html, che è generata dal bundle e si porta dentro una copia INTERA del
   vecchio design system (i suoi token, i suoi @font-face). Iniettarle il foglio completo
   le riscriverebbe il layout; iniettarle solo le variabili la riallinea al brand e basta.
   Se questa riga sparisce, la build si ferma invece di scrivere un file monco. */

/* ══ elementi ═══════════════════════════════════════════════════════════════ */

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.55; font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* ⚠️ Il focus ring è il cotto a 2px con offset 2px, non un alone chiaro: sul fondo calce
   un alone tenue non si vede, e chi naviga da tastiera perde il segno di dove si trova. */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.washed { filter: saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94); }

.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* ══ bottoni ════════════════════════════════════════════════════════════════
   ⚠️ CAMBIO 1 rispetto a Organic: il testo del bottone era `var(--font-heading)`. Con
   Caprasimo era una scelta; con la Garamond un bottone diventa un titolino serif, e nel
   design le azioni sono Plex Sans 500. Il titolo resta serif, l'azione no. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-weight: 500;
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* ══ form ═══════════════════════════════════════════════════════════════════
   ⚠️ CAMBIO 2: il bordo dell'input era `--color-divider`, che sul fondo fa 1,34:1 —
   un controllo il cui contorno non si vede. Ora è `--color-neutral-600`: 3,98:1, appena
   sopra il 3:1 che WCAG chiede ai bordi dei controlli. Il divider resta ai filetti. */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-600); border-radius: var(--radius-md);
}
.input:hover { border-color: var(--color-neutral-700); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-neutral-600);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-neutral-600); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* ══ card ═══════════════════════════════════════════════════════════════════ */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-lg); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* ══ tag ════════════════════════════════════════════════════════════════════ */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: var(--radius-sm);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* ══ navigazione ════════════════════════════════════════════════════════════ */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* ══ tabelle ════════════════════════════════════════════════════════════════ */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* ══ dialog ═════════════════════════════════════════════════════════════════ */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* ⚠️⚠️ CAMBIO 3, ed è quello che si vede. Qui Organic chiudeva con:
       .card, .dialog { border-radius: calc(var(--radius-lg) * 1.15); }
       .btn, .tag, .seg, .input { border-radius: 999px; }
   Una regola che SCAVALCA i token: si poteva portare `--radius-lg` a 6px senza che
   cambiasse niente, perché bottoni e input restavano pillole. Tolta. I raggi ora li
   decide `tokens.css`, che è il punto di avere dei token. Se le pillole ricompaiono,
   qualcuno ha rimesso in mezzo un design system estratto da un bundle. */

/* ══ pagine servite dal sito ════════════════════════════════════════════════ */
a:hover { color: var(--color-accent-800); }
.moor-scroll::-webkit-scrollbar { height: 0; }
.moor-faq summary::-webkit-details-marker { display: none; }
.moor-faq summary { list-style: none; }
.moor-faq[open] .moor-plus { transform: rotate(45deg); }