/* ============================================================
   NOT EASY ENGLISH — Design Tokens
   Bold contemporaneo, premium e adulto. Mobile-first.
   ============================================================ */

/* === SELF-HOSTED FONTS — inizio === */
/* Serviti dal nostro dominio: il browser non contatta Google Fonts.
   Un solo file per famiglia (font VARIABILE, asse wght), come fa Google quando
   si chiede un intervallo di pesi anziché i pesi discreti: stessa resa, una
   sola richiesta. Percorsi ASSOLUTI perché questo foglio è collegato da pagine
   a profondità diverse. unicode-range identica a quella di Google, così i glifi
   fuori dal subset latin (★ ● ‹ ›) cadono sul font di sistema come prima.
   Fredoka NON sta qui: è l'eccezione Bitesize e vive in styles/materiali.css. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk.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: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/inter.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;
}
/* === fine === */

:root {
  /* ---- Colore ---- */
  --bg:            #FFFFFF;   /* sfondo */
  --surface:       #F6F7FB;   /* superfici/chiaro */
  --ink:           #111111;   /* testo */
  --muted:         #6B6B6B;   /* secondario */
  --border:        #ECECEC;   /* bordi sottili */

  --primary:       #2348F0;   /* blu elettrico — azioni */
  --primary-press: #1B39C7;   /* blu pressed */
  --pop:           #FFD23F;   /* giallo — chip/evidenze */

  /* Tag lingua (distinti dal blu d'azione) */
  --tag-en:        #0E8FC4;   /* ciano per Inglese */
  --tag-en-soft:   #DDF2FA;
  --tag-it:        #B5257E;   /* magenta per Italiano */
  --tag-it-soft:   #FBE6F1;
  --tag-fr:        #6B3FA0;   /* viola profondo per Francese */
  --tag-fr-soft:   #EFE8F8;

  /* Stati slot */
  --state-free:        #0E7C66;  /* disponibile */
  --state-free-soft:   #E2F2EE;  /* verde-soft per lo stato disponibile (indipendente dai tag lingua) */
  --state-free-dot:    #21C55E;  /* verde acceso: SOLO il pallino della griglia calendario, dove serve leggibilità a 8px su fondo bianco. NON usare per pill, testi o sfondi: lì resta --state-free */
  --state-pending:     #B8860B;  /* in attesa di pagamento */
  --state-confirmed:   #2348F0;  /* confermato */
  --state-past:        #9A9A9A;  /* passato */

  /* Feedback */
  --danger:        #C0341E;
  --danger-soft:   #FBEAE7;
  --warn:          #B35C00;   /* arancione bruciato — attenzione */
  --warn-soft:     #FDF0DD;
  --state-warn-dot: #F59E0B;  /* ambra: SOLO i pallini di stato, dove --warn #B35C00 non si distingue da --danger a 8px. NON usare per testi o chip: lì resta --warn, che ha il contrasto giusto sul fondo soft */

  /* ---- Tipografia ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-ui:      'Inter', system-ui, sans-serif;

  /* ---- Raggi ---- */
  --r-btn:   9px;
  --r-card:  14px;
  --r-chip:  7px;
  --r-pill:  999px;

  /* ---- Ombre ---- */
  --shadow-card:  0 1px 2px rgba(17,17,17,0.04), 0 6px 20px rgba(17,17,17,0.05);
  --shadow-blue:  0 8px 24px rgba(35,72,240,0.28);
  --shadow-pop:   0 10px 30px rgba(17,17,17,0.10);

  /* ---- Spazio ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
}

* { box-sizing: border-box; }

/* ============================================================
   Base
   ============================================================ */
.ne-app {
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ne-app h1, .ne-app h2, .ne-app h3, .ne-app .display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
}

/* ============================================================
   Bottoni
   ============================================================ */
.btn {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 15px;
  border: none;
  border-radius: var(--r-btn);
  padding: 13px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  line-height: 1;
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-press); }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; }

.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--border); }
.btn--ghost:hover { background: var(--surface); }

.btn--onblue { background: #fff; color: var(--primary); font-weight: 600; }
.btn--onblue:hover { background: #f0f2ff; }

.btn--block { width: 100%; }
.btn--lg { padding: 16px 20px; font-size: 16px; }

.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ============================================================
   Card
   ============================================================ */
.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: var(--sp-5);
}
.card--surface { background: var(--surface); border-color: transparent; }
.card--blue {
  background: var(--primary);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-blue);
}

/* ============================================================
   Chip / Tag
   ============================================================ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: var(--r-chip);
  line-height: 1;
  letter-spacing: 0.01em;
}
.chip--level { background: var(--pop); color: var(--ink); font-family: var(--font-display); }
.chip--en { background: var(--tag-en-soft); color: var(--tag-en); }
.chip--it { background: var(--tag-it-soft); color: var(--tag-it); }
.chip--fr { background: var(--tag-fr-soft); color: var(--tag-fr); }
.chip--ghost { background: var(--surface); color: var(--muted); }
.chip--warn { background: var(--warn-soft); color: var(--warn); }

/* dot tag (compact language indicator) */
.dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.dot--en { background: var(--tag-en); }
.dot--it { background: var(--tag-it); }
.dot--fr { background: var(--tag-fr); }

/* ============================================================
   Stato slot — pill
   ============================================================ */
.state {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 4px 9px;
  border-radius: var(--r-pill); line-height: 1;
}
.state__dot { width: 7px; height: 7px; border-radius: 999px; }
.state--free      { background: var(--state-free-soft); color: var(--state-free); }
.state--free .state__dot { background: var(--state-free); }
.state--pending   { background: #FBF1DA; color: var(--state-pending); }
.state--pending .state__dot { background: var(--state-pending); }
.state--confirmed { background: #E5EAFE; color: var(--state-confirmed); }
.state--confirmed .state__dot { background: var(--state-confirmed); }
.state--past      { background: var(--surface); color: var(--state-past); }
.state--past .state__dot { background: var(--state-past); }
.state--warn      { background: var(--warn-soft); color: var(--warn); }
.state--warn .state__dot { background: var(--state-warn-dot); }

/* ============================================================
   Spec list
   ============================================================ */
/* Elenco specifiche (pagine offerta): etichetta in grassetto + descrizione.
   Vive qui e non in app-shell.css perche' le pagine pubbliche collegano SOLO
   tokens.css: e' il pattern da riusare nelle prossime pagine offerta. */
.spec-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.spec-list li { font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.spec-list strong { color: var(--ink); font-weight: 600; }

/* ============================================================
   Util
   ============================================================ */
.muted { color: var(--muted); }
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.divider { height: 1px; background: var(--border); border: none; margin: 0; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }

/* ============================================================
   Logo header (sostituisce il wordmark testuale — app shell + zona pubblica)
   ============================================================ */
.app-header__logo { display: block; height: 44px; width: auto; }
@media (min-width: 900px) { .app-header__logo { height: 52px; } }