/* ==========================================================================
   SOTTOMODA — Design token
   Colori decisi dal brief: non aggiungerne altri.
   ========================================================================== */

:root {
  /* ---- Colori ---- */
  --c-nero: #110B10;     /* fondo di tutto il sito */
  --c-rosa: #F3E8EA;     /* testo e filetti */
  --c-arancio: #FF7500;  /* SOLO hover e stati attivi, mai su fondo rosa */
  --c-verde: #05461C;    /* blocchi pieni e sezioni speciali */
  --c-filetto: rgb(243 232 234 / 0.2);
  --c-rosa-soft: rgb(243 232 234 / 0.72);
  --c-velatura: rgb(17 11 16 / 0.94);
  --c-attivo: var(--c-arancio);   /* nei blocchi verdi diventa rosa */

  /* ---- Font: PROVVISORI, da sostituire con i font definitivi del brand ---- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;  /* PROVVISORIO */
  --font-text: "Archivo", "Helvetica Neue", Arial, sans-serif;     /* PROVVISORIO */
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; /* PROVVISORIO */

  /* ---- Scala tipografica ---- */
  --fs-meta: 0.6875rem;
  --fs-body: 1.0625rem;
  --fs-article: 1.1875rem;
  --fs-section: clamp(5rem, 22vw, 15rem);
  --fs-chapter: clamp(3rem, 14.4vw, 6.5rem);
  --lh-display: 0.9;
  --track-display: -0.02em;

  /* ---- Spazi e griglia ---- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --grid-gap: 16px;
  --block-gap: 80px;

  /* ---- Header ---- */
  --header-h: 56px;
  --header-total: calc(var(--header-h) + var(--safe-top));
  --star-docked: 44px;      /* alta quanto il pulsante del menu */

  /* ---- Altezza piccola del viewport: non salta con la barra di Safari ---- */
  --svh: 1vh;

  /* ---- Pila di card ---- */
  --stick-top: calc(var(--header-total) + 12px);
  --peek: 9px;
  --stack-gap: 12px;
  --radius-card: 16px;

  /* ---- Durate ---- */
  --dur-fast: 0.18s;
  --dur-med: 0.3s;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@supports (height: 1svh) {
  :root { --svh: 1svh; }
}

@media (min-width: 768px) {
  :root {
    --gutter-l: max(24px, env(safe-area-inset-left, 0px));
    --gutter-r: max(24px, env(safe-area-inset-right, 0px));
    --grid-gap: 24px;
    --header-h: 64px;
    --fs-section: clamp(7rem, 15vw, 17rem);
    --fs-chapter: clamp(5rem, 9vw, 11rem);
  }
}