/* =============================================================================
   DE LUX 21 — Design tokens (source of truth)
   Variabili + i 3 temi. Nessun colore hardcoded altrove: tutto legge i token.
   Tema su html[data-theme="champagne|navy|notte"] (stampato server-side).
   Il default e' champagne: sta su :root, i due temi a fondo bianco lo scavalcano
   quando l'attributo c'e'.
   ========================================================================== */

:root {
  /* Tipografia */
  --font-display: 'Bodoni Moda', Georgia, serif;       /* titoli, sposa il logo Didone */
  --font-ui: 'Schibsted Grotesk', system-ui, sans-serif;/* nav, label, bottoni, dati */
  --font-text: 'Newsreader', Georgia, serif;            /* prosa editoriale */

  --fw-reg: 400; --fw-med: 500; --fw-sb: 600; --fw-bold: 700; --fw-black: 800;

  /* Scala fluida */
  --fs-hero: clamp(3rem, 9vw, 3rem);
  --fs-h1: clamp(2.4rem, 6vw, 5.5rem);
  --fs-h2: clamp(1.9rem, 4.2vw, 3.6rem);
  --fs-h3: clamp(1.3rem, 2.4vw, 2rem);
  --fs-body: clamp(1rem, 1.2vw, 1.15rem);
  --fs-label: clamp(0.72rem, 0.9vw, 0.82rem);           /* small-caps gold */

  /* Spaziatura e forme */
  --space-section: clamp(5rem, 10vw, 11rem);
  --container: 1320px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius-card: 4px;          /* luxe = angoli quasi netti */
  --radius-pill: 999px;
  --hairline: 1px;

  /* Ombra delle bottiglie ritagliate
     --------------------------------------------------------------------------
     UNA sola densita' per tutte le misure: cambiano scostamento e sfocatura,
     che seguono la dimensione, ma non l'alpha. Serve alle due slider, dove la
     bottiglia VOLA dall'anteprima piccola allo slot grande: con due alpha
     diverse (erano .25 e .45 contro .40 e .50) l'ombra si scuriva di colpo nel
     momento in cui la bottiglia si staccava, ed e' una delle due cose che il
     cliente ha segnalato il 16/09/2026 ("ombre che compaiono o scompaiono").

     Le usano anche i cloni costruiti in JavaScript: sono appesi a <body>, e le
     variabili di :root si ereditano, quindi `filter: var(--ombra-bottiglia)`
     funziona anche li' e non c'e' un secondo posto dove il valore puo'
     divergere. Chi cambia l'ombra la cambia qui e basta. */
  --ombra-alpha: .42;
  --ombra-bottiglia:         drop-shadow(0 34px 46px rgba(0, 0, 0, var(--ombra-alpha)));
  --ombra-bottiglia-piccola: drop-shadow(0 14px 20px rgba(0, 0, 0, var(--ombra-alpha)));

  /* Easing */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-emph: cubic-bezier(0.22, 1, 0.36, 1);

  --label-tracking: 0.18em;

  /* card bianca "pulita" + ombra soft luxe (i temi ridefiniscono --card) */
  --shadow-card: 0 1px 2px rgba(22, 36, 63, .05), 0 10px 30px rgba(22, 36, 63, .05);

  /* Riga che separa la bottiglia dalle informazioni nella card prodotto.
     Sta qui e non dentro components.css perche' nessun componente deve avere
     colori scritti a mano; e' volutamente uguale nei tre temi. */
  --card-divisore: #9A1717;
}

/* --- TEMA CHAMPAGNE (default) — luxe chiaro, fondo beige, testo navy --------
   E' il tema con cui il sito si presenta a chi arriva la prima volta, quindi
   sta su :root e vale anche dove l'attributo non viene stampato. Il beige
   ufficiale e' #EEE3CF; l'header lo usa a C2 (76%) perche' sotto c'e' la
   sfocatura e la pagina deve trasparire appena mentre scorre.
   -------------------------------------------------------------------------- */
:root,
[data-theme="champagne"] {
  --bg: #EEE3CF;          /* beige ufficiale */
  --surface: #F6EEE0;
  --card: #FCF8F1;        /* card quasi bianca: risalta sul fondo beige */
  --ink: #16243F;
  --ink-soft: #4C5468;
  --line: rgba(22, 36, 63, 0.16);
  --brand: #16243F;
  --on-brand: #EEE3CF;
  --accent: #8E2433;
  --accent-ink: #FFFFFF;
  --gold: #9C7B3E;        /* gold più scuro per contrasto sul beige */
  --nav-bg: #EEE3CFC2;    /* sfondo header ufficiale, alfa compresa */
}

/* --- TEMA NAVY — fondo bianco, inchiostro navy, accento bordeaux ----------- */
[data-theme="navy"] {
  --bg: #FFFFFF;          /* fondo bianco */
  --surface: #F6F5F2;     /* card bianco sporco appena percettibile */
  --card: #FFFFFF;        /* card bianca netta (area riservata) */
  --ink: #16243F;         /* testo navy */
  --ink-soft: #5A6275;
  --line: rgba(22, 36, 63, 0.14);
  --brand: #16243F;       /* sezioni scure: hero overlay, footer, nav scura */
  --on-brand: #EFE7D8;    /* champagne su navy */
  --accent: #8E2433;      /* bordeaux: CTA, link, evidenziazione mappa */
  --accent-ink: #FFFFFF;
  --gold: #B8985A;        /* dettagli fini: label, hairline, icone */
  --nav-bg: color-mix(in srgb, var(--bg) 88%, transparent);
}

/* --- TEMA NOTTE — identico al navy ma il NAVY diventa NERO (logo nero/champ.) */
/* Stessi fondi bianchi della v1: cambia solo l'inchiostro/le sezioni scure.   */
[data-theme="notte"] {
  --bg: #FFFFFF;          /* fondo bianco, come la v1 */
  --surface: #F6F5F2;     /* card bianco sporco, come la v1 */
  --card: #FFFFFF;        /* card bianca netta (area riservata) */
  --ink: #0E0E0E;         /* testo nero (era navy) */
  --ink-soft: #5B5B5B;
  --line: rgba(0, 0, 0, 0.14);
  --brand: #0E0E0E;       /* sezioni scure: nere invece che navy */
  --on-brand: #EFE7D8;    /* champagne sul nero */
  --accent: #8E2433;      /* bordeaux, come la v1 */
  --accent-ink: #FFFFFF;
  --gold: #B8985A;        /* gold, come la v1 */
  --nav-bg: color-mix(in srgb, var(--bg) 88%, transparent);
}


/* --- Reset essenziale ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: clip;
}
:root { transition: background-color .4s var(--ease), color .4s var(--ease); }

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; }
ul { list-style: none; padding: 0; }

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* --- Tipografia base ------------------------------------------------------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: var(--fw-med);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--ink);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.label {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--label-tracking);
  color: var(--gold);
  font-weight: var(--fw-sb);
}