/* ============================================================================
   STILE 2 — MARE · colori e caratteri
   Tavolozza CHIARA. È il primo tema che ribalta il fondo, perciò tocca anche
   le variabili "di servizio" (fondo del carosello, pulsanti, pallini).
   Le pagine a schermo intero restano scure: lì il testo sta sopra la foto.
   ========================================================================== */

:root{
  --bg:        #f4f8fa;   /* bianco appena azzurrato */
  --bg-2:      #ffffff;   /* le carte */
  --bg-3:      #ffffff;
  --bg-4:      #dde8ee;   /* rilievi e fondo delle foto */
  --ember:     #1b6d8f;   /* blu profondo */
  --ember-2:   #2f8fb3;
  --flame:     #0f4c66;
  --brick:     #0d3a4f;
  --gold:      #c2a06a;   /* sabbia */
  --gold-soft: #8a6f45;   /* sabbia scura: sul bianco deve restare leggibile */
  --basil:     #4f8f7d;   /* verde acqua */
  --cream:     #12303d;   /* ⚠️ qui è il TESTO, e su fondo chiaro va scuro */
  --muted:     #5d7684;
  --line:      rgba(27,109,143,.20);
  --shadow:    0 18px 40px rgba(16,56,74,.14);

  --gold-rgb:  194,160,106;
  --ember-rgb: 27,109,143;
  --ink-rgb:   8,28,38;                    /* le pagine a tutto schermo: blu notte */

  --overlay-bg:     rgba(244,248,250,.975);  /* il carosello sul computer è chiaro */
  --btn-bg:         rgba(18,48,61,.42);
  --dot-bg:         rgba(18,48,61,.26);
  --page-dot:       rgba(255,255,255,.34);
  --gold-2:         #a8864f;
  --page-text:      #ffffff;                 /* sopra la foto il testo resta bianco */
  --page-text-soft: rgba(255,255,255,.86);
  --page-line:      rgba(255,255,255,.24);

  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-head:    "Montserrat", system-ui, sans-serif;
  --font-body:    "Karla", system-ui, sans-serif;
}

/* il fondo: luce dall'alto, un velo di mare in basso */
body{
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(47,143,179,.14), transparent 55%),
    radial-gradient(90% 60% at 50% 110%, rgba(27,109,143,.12), transparent 60%),
    var(--bg);
}
/* la trama a griglia scura di base.css su fondo chiaro sporca: la schiarisco */
body::before{
  background-image:
    linear-gradient(rgba(18,48,61,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,48,61,.035) 1px, transparent 1px);
}

/* il nome: grazie leggere e molta aria */
.hero-name{ font-weight:600; letter-spacing:.01em; text-shadow:none; color:var(--flame); }
.hero .sub{ letter-spacing:.34em; font-size:.92rem; font-weight:500; color:var(--ember); }
.kicker{ color:var(--gold-soft); }
.hero .flame-rule{
  background:linear-gradient(90deg, transparent, var(--ember), var(--gold), transparent);
  box-shadow:none; height:2px;
}

/* le fasce: fondo bianco e ombra tenue, non il rilievo scuro dell'osteria */
.cat-btn{
  background:var(--bg-2);
  box-shadow:0 8px 22px rgba(16,56,74,.10), inset 0 0 0 1px rgba(27,109,143,.10);
}
.cat-btn:hover, .cat-btn:focus-visible{
  border-color:rgba(27,109,143,.45);
  box-shadow:0 14px 30px rgba(16,56,74,.16), 0 0 0 1px rgba(27,109,143,.25);
}
.cat-btn .label{ letter-spacing:.04em; font-size:1.06rem; font-weight:600; text-transform:uppercase; }
.cat-btn .count{ color:var(--muted); }
.cat-btn .arrow{ color:var(--ember); }

/* la carta sul computer: bianca, con un filo di bordo invece del bagliore */
.card{ border-color:rgba(27,109,143,.18); }
.card .body .kick{ color:var(--ember); }

/* il riquadro Specialità: qui non è oro su bruno ma mare profondo su sabbia */
:root{
  --spec-bg:  linear-gradient(135deg, #0d3a4f 0%, #1b6d8f 55%, #2f8fb3 100%);
  --spec-ink: #ffffff;
  --spec-sub: rgba(255,255,255,.78);
}
.feature.specialita{ border-color:rgba(27,109,143,.55); }

/* sulla carta bianca la foto non sfuma nel nero ma nel bianco */
:root{ --photo-veil:rgba(255,255,255,.92); }

/* la carta "specialità" nel motore è oro su bruno: qui diventa blu profondo.
   ⚠️ Questi colori in base.css sono ancora scritti a mano, non variabili: al
   terzo tema converrà trasformarli come è stato fatto per tutti gli altri. */
.card.special{ background:linear-gradient(180deg, #123f55, #0d3242); border-color:rgba(255,255,255,.18); }
.card.special .photo{ background:linear-gradient(135deg, rgba(47,143,179,.45), rgba(13,58,79,.6)), var(--bg-4); }
.card.special .photo::after{ background:linear-gradient(transparent, rgba(13,50,66,.96)); }
.card.special .photo .fallback{ background:radial-gradient(80% 80% at 50% 34%, rgba(47,143,179,.4), transparent 70%), linear-gradient(160deg, #14536e, #0b2c3b); }
.card.special .body h3{ color:#ffffff; }
.card.special .body p{ color:rgba(255,255,255,.84); }
.card.special .body .spec-kick{ color:#bfe3f2; text-shadow:none; }
.card.special .seal{ color:#bfe3f2; }
.overlay.pages .card.special{ background:linear-gradient(180deg, #123f55, #081c26); }
.overlay.pages .card.special .photo::after{ background:linear-gradient(transparent, rgba(8,28,38,.55) 38%, rgba(8,28,38,.97)); }