/* LupiFoundry — foglio di stile del sito.
   Tipografia: Instrument Sans per i titoli, Inter per il testo.
   Temi: chiaro, scuro, automatico. I token vivono in :root e vengono
   ridefiniti da [data-theme] e da prefers-color-scheme. */

@font-face {
  font-family: 'Inter';
  src: url('font/Inter-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('font/Inter-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('font/InstrumentSans-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- token: tema scuro (default) ---------- */
:root {
  --ink:     #0B0F14;
  --ink-2:   #12171F;
  --ink-3:   #171D26;
  --ash:     #EDEEF0;
  --muted:   #8B929B;
  --doc-txt: #CFD3D8;
  --range:   #3DD68C;
  --on-range:#06231A;
  --amber:   #E08A2E;
  --coral:   #FF6A3D;
  --line:    rgba(237,238,240,.12);
  --line-2:  rgba(237,238,240,.24);
  --glow:    rgba(61,214,140,.14);
  --shadow:  0 24px 48px -28px rgba(0,0,0,.7);

  --sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --display: 'Instrument Sans', var(--sans);
  --display-w: 600;      /* il peso del carattere da display: cambia con lui */
  --display-t: -.03em;   /* un sans da display vuole spaziatura piu stretta di un serif */
  --maxw:    68rem;
  --read:    38rem;
  color-scheme: dark;
}

/* ---------- token: tema chiaro ---------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ink:     #FBFAF7;
    --ink-2:   #FFFFFF;
    --ink-3:   #F3F1EC;
    --ash:     #14181D;
    --muted:   #5B636D;
    --doc-txt: #2C333B;
    --range:   #0F7A50;
    --on-range:#FFFFFF;
    --amber:   #A85A16;
    --coral:   #C0431A;
    --line:    rgba(20,24,29,.14);
    --line-2:  rgba(20,24,29,.28);
    --glow:    rgba(15,122,80,.10);
    --shadow:  0 24px 48px -32px rgba(20,24,29,.28);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ink:     #FBFAF7;
  --ink-2:   #FFFFFF;
  --ink-3:   #F3F1EC;
  --ash:     #14181D;
  --muted:   #5B636D;
  --doc-txt: #2C333B;
  --range:   #0F7A50;
  --on-range:#FFFFFF;
  --amber:   #A85A16;
  --coral:   #C0431A;
  --line:    rgba(20,24,29,.14);
  --line-2:  rgba(20,24,29,.28);
  --glow:    rgba(15,122,80,.10);
  --shadow:  0 24px 48px -32px rgba(20,24,29,.28);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--ash);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s ease, color .35s ease;
}

a { color: var(--ash); text-decoration-color: var(--line-2); text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--range); }
:focus-visible { outline: 2px solid var(--range); outline-offset: 3px; border-radius: 2px; }

.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }

/* ---------- header ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--line);
}
.site-header img { height: 1.5rem; width: auto; display: block; }
.site-nav { display: flex; gap: 1.5rem; font-size: .9375rem; flex-wrap: wrap; align-items: center; }
.site-nav a { text-decoration: none; color: var(--muted); transition: color .2s ease; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ash); }

@media (max-width: 34rem) {
  .site-header { flex-direction: column; align-items: flex-start; gap: .875rem; }
  .site-nav { gap: 1.25rem; }
}

/* ---------- logo: due file, uno per fondo ----------
   Il wordmark è un <img>, quindi non eredita il colore del testo. Le due
   varianti convivono nel markup e il tema decide quale mostrare. */
img.l-chiaro { display: none; }   /* specificità pari a .site-header img, e viene dopo */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .l-scuro  { display: none; }
  :root:not([data-theme="dark"]) .l-chiaro { display: block; }
}
:root[data-theme="light"] .l-scuro  { display: none; }
:root[data-theme="light"] .l-chiaro { display: block; }

/* ---------- SVG inline: i colori fissi diventano token ----------
   Gli attributi di presentazione hanno priorità più bassa di qualunque regola
   CSS, quindi si riagganciano al tema senza modificare il markup. Serve per le
   pagine di Nivela, che sono generate nel repo dell'app e non vanno toccate qui. */
[fill="#EDEEF0"] { fill: var(--ash); }
[fill="#3DD68C"] { fill: var(--range); }
[fill="#8B929B"] { fill: var(--muted); }
[fill="#E08A2E"] { fill: var(--amber); }
[fill="#12171F"] { fill: var(--ink-2); }
[fill="#0B0F14"] { fill: var(--ink); }
[fill="#FF6A3D"] { fill: var(--coral); }
[stroke="#EDEEF0"] { stroke: var(--ash); }
[stroke="#3DD68C"] { stroke: var(--range); }
[stroke="#8B929B"] { stroke: var(--muted); }
[stroke="#E08A2E"] { stroke: var(--amber); }
[stroke="#FF6A3D"] { stroke: var(--coral); }

/* ---------- selettore del tema ---------- */
.theme-toggle {
  appearance: none; background: transparent; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px;
  width: 2.25rem; height: 2.25rem; padding: 0; flex: none;
  display: grid; place-items: center; color: var(--muted);
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.theme-toggle:hover { color: var(--ash); border-color: var(--line-2); transform: rotate(-12deg); }
.theme-toggle svg { width: 1.0625rem; height: 1.0625rem; display: block; }
.theme-toggle .i-sole, .theme-toggle .i-auto { display: none; }
:root[data-theme="light"] .theme-toggle .i-luna { display: none; }
:root[data-theme="light"] .theme-toggle .i-sole { display: block; }
:root[data-theme="auto"] .theme-toggle .i-luna,
:root[data-theme="auto"] .theme-toggle .i-sole { display: none; }
:root[data-theme="auto"] .theme-toggle .i-auto { display: block; }

/* ---------- hero ---------- */
.hero { padding: clamp(3.5rem, 10vw, 7rem) 0 clamp(2.5rem, 6vw, 4rem); }
.eyebrow {
  font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 1.25rem;
}
.hero h1 {
  font-family: var(--display); font-weight: var(--display-w);
  font-size: clamp(2.75rem, 8vw, 5.25rem); letter-spacing: var(--display-t);
  line-height: 1.02; margin: 0 0 1rem;
}
.hero .claim {
  font-size: clamp(1.125rem, 2.6vw, 1.5rem); line-height: 1.45; color: var(--ash);
  max-width: 34ch; margin: 0 0 2rem; font-weight: 400;
}
.hero .claim strong { font-weight: 700; }

.cta-row { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.cta {
  display: inline-block; padding: .875rem 1.5rem; border-radius: 999px;
  background: var(--range); color: var(--on-range); font-weight: 700; text-decoration: none;
  font-size: 1rem; transition: transform .2s ease, filter .2s ease;
}
.cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
.cta[aria-disabled="true"] { background: transparent; color: var(--ash); border: 1px solid var(--line); }
.cta-note { color: var(--muted); font-size: .9375rem; }

/* ---------- signature: fascia del range glicemico ---------- */
.rangeband { margin: clamp(2.5rem, 6vw, 4rem) 0 0; }
.rangeband svg { width: 100%; height: auto; display: block; }
.rangeband figcaption {
  margin-top: .875rem; color: var(--muted); font-size: .875rem;
  font-variant-numeric: tabular-nums;
}
.divider-band { height: 1px; background: var(--line); margin: clamp(3rem, 7vw, 5rem) 0; }

/* ---------- sezioni ---------- */
section { padding-block: clamp(2rem, 5vw, 3rem); }
h2 {
  font-family: var(--display); font-weight: var(--display-w);
  font-size: clamp(1.625rem, 3.6vw, 2.25rem); letter-spacing: -.022em;
  line-height: 1.15; margin: 0 0 1.25rem;
}
h3 { font-size: 1.0625rem; font-weight: 700; margin: 0 0 .375rem; }
p { margin: 0 0 1rem; }
.lead { color: var(--muted); max-width: 60ch; }

.grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.item { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.item p { color: var(--muted); margin: 0; }
.item .mark { color: var(--range); font-weight: 700; font-variant-numeric: tabular-nums; }

ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { border-top: 1px solid var(--line); padding: .875rem 0; color: var(--muted); }
ul.plain li b { color: var(--ash); font-weight: 700; }

/* ---------- passi numerati ---------- */
ol.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 1.75rem; }
@media (min-width: 46rem) { ol.steps { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
ol.steps li { counter-increment: step; border-top: 1px solid var(--line); padding-top: 1.25rem; }
ol.steps li::before {
  content: counter(step, decimal-leading-zero); display: block; font-variant-numeric: tabular-nums;
  color: var(--range); font-weight: 700; font-size: .9375rem; letter-spacing: .04em; margin-bottom: .625rem;
}
ol.steps p { color: var(--muted); margin: 0; }

/* ---------- mini grafici ---------- */
.viz-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; margin-top: .5rem; }
@media (min-width: 40rem) { .viz-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 60rem) { .viz-grid { grid-template-columns: repeat(3, 1fr); } }
.viz { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.viz svg { display: block; width: 100%; height: auto; margin-bottom: 1rem; }
.viz h3 { margin: 0 0 .375rem; }
.viz p { color: var(--muted); margin: 0; font-size: .9375rem; }

/* ---------- screenshot ---------- */
.shots { margin-top: .75rem; }
.shots-row {
  display: grid; gap: 1.25rem;
  grid-auto-flow: column; grid-auto-columns: minmax(13.5rem, 72vw);
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: .25rem .25rem 1.5rem; margin-inline: -.25rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
@media (min-width: 60rem) {
  .shots-row {
    grid-auto-flow: row; grid-template-columns: repeat(5, 1fr);
    grid-auto-columns: auto; overflow: visible; gap: 1rem; margin-inline: 0;
  }
}
.shot { margin: 0; scroll-snap-align: center; }
.shot img {
  width: 100%; height: auto; display: block; border-radius: 1.5rem;
  border: 1px solid var(--line); background: var(--ink-2);
  box-shadow: var(--shadow); transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.shot:hover img { transform: translateY(-6px); }
.shot figcaption { margin-top: .875rem; text-align: center; }
.shot figcaption b { display: block; color: var(--ash); font-weight: 700; font-size: .9375rem; }
.shot figcaption span { color: var(--muted); font-size: .8125rem; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); margin-top: .5rem; }
.faq details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.faq summary {
  cursor: pointer; list-style: none; font-weight: 700; color: var(--ash);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: 1.25rem; }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { color: var(--muted); margin: .75rem 0 0; }

/* ---------- disclaimer medico ---------- */
.disclaimer {
  border: 1px solid var(--line); border-left: 2px solid var(--amber);
  background: var(--ink-2); padding: 1.25rem 1.375rem; border-radius: 4px;
  color: var(--muted); font-size: .9375rem;
}
.disclaimer b { color: var(--ash); }

/* ---------- avvisami all'uscita ---------- */
.avvisami {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(1.75rem, 4vw, 2.5rem); max-width: 44rem;
}
.avvisami h2 { margin: 0 0 .6rem; }
.avvisami p { color: var(--muted); margin: 0 0 1.25rem; max-width: 46ch; }
.avvisami .cta { margin-bottom: .875rem; }
.avvisami .mini { font-size: .875rem; margin: 0; max-width: 52ch; }

/* ---------- documenti ---------- */
.doc { padding: clamp(2.5rem, 6vw, 4rem) 0 2rem; }
.doc-inner { max-width: var(--read); }
.doc h1 { font-family: var(--display); font-weight: var(--display-w); font-size: clamp(1.875rem, 4.5vw, 2.625rem); letter-spacing: -.025em; line-height: 1.12; margin: 0 0 .75rem; }
.doc .meta { color: var(--muted); font-size: .875rem; margin: 0 0 2.5rem; }
.doc .meta a { color: var(--muted); }
.doc h2 {
  font-size: 1.375rem; margin: 2.75rem 0 .875rem; padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.doc h3 { font-size: 1.0625rem; margin: 1.75rem 0 .5rem; font-family: var(--sans); font-weight: 700; }
.doc p, .doc li { color: var(--doc-txt); }
.doc ul, .doc ol { padding-left: 1.25rem; margin: 0 0 1rem; }
.doc li { margin-bottom: .5rem; }
.doc strong { color: var(--ash); }
.doc hr { display: none; }
/* Senza questa regola varrebbe il margine di default del browser (1em 40px) e la prosa
   dentro le citazioni partirebbe 40px piu a destra del resto del documento. */
.doc blockquote {
  margin: 1.5rem 0; padding: .25rem 0 .25rem 1rem;
  border-left: 2px solid var(--line-2);
}
.doc blockquote > :last-child { margin-bottom: 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: .9375rem; }
.doc th, .doc td { text-align: left; padding: .625rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { color: var(--ash); font-weight: 700; }
.doc td { color: var(--muted); }
.doc code { background: var(--ink-2); padding: .1em .4em; border-radius: 3px; font-size: .9em; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line); margin-top: clamp(3rem, 8vw, 6rem);
  padding: 2.5rem 0 3.5rem; color: var(--muted); font-size: .9375rem;
}
.site-footer .cols { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .site-footer .cols { grid-template-columns: 2fr 1fr 1fr; } }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--ash); text-decoration: underline; }
.site-footer .spark { color: var(--amber); }
.site-footer ul { list-style: none; padding: 0; margin: .5rem 0 0; }
.site-footer li { margin-bottom: .375rem; }
.site-footer .aggiornata { color: var(--muted); }
.site-footer .legal { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .875rem; }

/* ---------- animazioni ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rangeband .dot { animation: rise .6s cubic-bezier(.2,.7,.3,1) backwards; }

  /* Comparsa progressiva legata allo scroll. È CSS puro: nessun JavaScript
     nasconde il testo, quindi non esiste il caso «script rotto, pagina vuota».
     Dove animation-timeline non c'è, la regola non si applica affatto e il
     contenuto si vede subito. */
  @supports (animation-timeline: view()) {
    .rivela {
      animation: comparsa .9s cubic-bezier(.2,.7,.3,1) both;
      animation-timeline: view();
      animation-range: entry 5% cover 28%;
    }
  }

  /* apertura della pagina */
  .apre > * { animation: sali .8s cubic-bezier(.2,.7,.3,1) backwards; }
  .apre > *:nth-child(2) { animation-delay: .07s; }
  .apre > *:nth-child(3) { animation-delay: .14s; }
  .apre > *:nth-child(4) { animation-delay: .21s; }
}
@keyframes rise     { from { opacity: 0; transform: translateY(6px); } }
@keyframes sali     { from { opacity: 0; transform: translateY(14px); } }
@keyframes comparsa { from { opacity: 0; transform: translateY(20px); } }

/* alone diffuso dietro il titolo: dà profondità senza pesare */
.alone { position: relative; isolation: isolate; }
.alone::before {
  content: ""; position: absolute; z-index: -1;
  inset: -25% -10% auto -10%; height: 22rem;
  background: radial-gradient(60% 60% at 30% 40%, var(--glow), transparent 70%);
  pointer-events: none;
}