/* Alt Season — sito. Un colore è un ruolo, come nelle app: chiaro e scuro si risolvono qui
   e le pagine non conoscono nessun esadecimale. Clash Grotesk sui titoli, sistema sul testo. */

@font-face { font-family:"Clash Grotesk"; src:url("/assets/fonts/ClashGrotesk-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Clash Grotesk"; src:url("/assets/fonts/ClashGrotesk-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Clash Grotesk"; src:url("/assets/fonts/ClashGrotesk-Semibold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Clash Grotesk"; src:url("/assets/fonts/ClashGrotesk-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }

:root {
  color-scheme: light dark;
  --background: #F6EFE7;
  --card:       #FFFBF5;
  --text:       #1D1D1B;
  --secondary:  #8A6F5F;
  --accent:     #803E3C;
  --on-accent:  #FFFFFF;
  --divider:    #E3C49D;
  --track:      #EDE4D8;
  --attention:  #B36D22;
  --success:    #149C78;
  --font-display: "Clash Grotesk", system-ui, -apple-system, sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --r-card: 20px;
  --r-btn:  12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #000000;
    --card:       #1D1D1B;
    --text:       #F6EFE7;
    --secondary:  #A89A8A;
    --accent:     #E3C49D;
    --on-accent:  #1D1D1B;
    --divider:    rgba(227, 196, 157, .28);
    --track:      #2E2A27;
    --attention:  #E8A85C;
  }
}

* { box-sizing:border-box; }
html, body { min-height:100%; }
body {
  margin:0; background:var(--background); color:var(--text);
  font-family:var(--font-body); font-size:17px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:6px; }
h1, h2, h3 { font-family:var(--font-display); font-weight:600; letter-spacing:.01em; line-height:1.15; margin:0 0 .5em; }
h1 { font-size:2rem; }
h2 { font-size:1.35rem; margin-top:1.8em; }

/* Pagina a schermo intero: contenuto al centro, piede in basso */
.page { min-height:100dvh; display:flex; flex-direction:column; align-items:center; padding:max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); }
.page__main { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:18px; width:100%; max-width:560px; }
.page__foot { width:100%; text-align:center; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--secondary); display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; padding-top:24px; }
.page__foot a { color:var(--secondary); }
.page__foot a:hover { color:var(--text); text-decoration:none; }

.logo { width:min(72vw, 360px); height:auto; display:block; }
.lead { color:var(--secondary); margin:0; }

/* I badge dei due store sono le loro immagini ufficiali, senza sfondo */
.stores { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 22px; margin-top:8px; }
.store-badge { display:block; width:180px; height:55px; transition:transform .2s ease; }
.store-badge img { width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 4px 12px rgba(0, 0, 0, .25)); }
.store-badge:hover { transform:scale(1.04); }

/* Rotella del reindirizzamento */
.spinner { width:18px; height:18px; border:2px solid var(--track); border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite; display:inline-block; vertical-align:-3px; margin-right:10px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Documento: privacy e termini */
.doc { width:100%; max-width:72ch; margin:0 auto; padding:32px 20px 64px; }
.doc__top { display:flex; justify-content:center; padding:8px 0 28px; }
.doc__top .logo { width:min(50vw, 220px); }
.doc hr { border:0; border-top:1px solid var(--divider); margin:40px 0; }
.doc .lang { margin-top:64px; }