/* Tema Autocity Matera.
   Qui vive solo l'ASPETTO: colori, font, ombre, raggi. La struttura sta in base.css.
   Definisce lo STESSO insieme di token di autocitybat.css: se ne manca uno, quel
   pezzo di sito resta senza colore.

   Direzione «Tufo e cielo». Blu e celeste come per gli altri dealer del Gruppo VW,
   ma la carta vira sulla pietra invece che sul bianco freddo: è quello che separa
   questo sito da Barletta, che è blu elettrico su bianco freddo con un lime acido.
   Barletta è un sistema a CONTRASTO (due colori che litigano), Matera è TONALE
   (una famiglia sola, il celeste come voce alta del blu). */

/* ─── Token ─── */
:root {
  /* Accenti */
  --blue: #0F4C81;        /* PRIMARIO — nav, link, selezione, prezzi */
  --blue-dark: #0C3E6A;
  --lime: #6EC6E8;        /* SECONDARIO celeste — inviti all'azione, occhielli */
  --lime-dark: #55B4DA;
  --accent: var(--lime);
  --accent-dark: var(--lime-dark);

  /* Base */
  --graphite: #14202E;    /* headings/testo forte su chiaro (blu-nero, non grigio) */
  --white: #FFFFFF;
  --paper: #F6F3EE;       /* pietra: e' il token che distingue Matera dagli altri */
  --paper-warm: #FAF7F2;
  --text: #1E2A38;
  --muted: #667585;
  --soft: #A2AEBB;
  --border: #E3DFD8;      /* bordo in famiglia con la carta, non grigio freddo */
  --success: #2E7D32;
  --danger: #C24A3D;
  --info: #0F4C81;

  /* Superfici scure */
  --ink: #14202E;
  --ink-soft: #1E2A38;
  --ink-2: #1E2A38;
  --line-dark: rgba(255,255,255,0.08);

  /* Alias storici (i nomi restano, i valori sono di Matera) */
  --navy: #14202E;
  --navy-dark: #0A121C;
  --navy-deep: #14202E;
  --sky: #0F4C81;
  --sky-soft: #E4F1F8;    /* pillola celeste pallida */

  /* Testo su fondo scuro */
  --on-dark: #FFFFFF;
  --on-dark-muted: rgba(255,255,255,0.66);
  --on-dark-soft: rgba(255,255,255, 0.58);

  /* Tipografia */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --font-serif: 'Source Serif Pro', Georgia, serif;

  /* Spaziatura — condivisa, non e' materia di tema */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* Raggi — quattro gradini, come gli altri tenant. Matera sta in mezzo:
     meno morbida di Barletta (8/14/20/26), meno squadrata di Amicar. */
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Ombre — tenui e fredde, per non sporcare la carta calda */
  --shadow-soft: 0 1px 2px rgba(20,32,46,0.05);
  --shadow-card: 0 1px 2px rgba(20,32,46,0.06);
  --shadow-lift: 0 1px 2px rgba(20,32,46,0.06);

  /* Misure — condivise */
  --container: 1280px;
  --container-narrow: 1080px;
  --nav-height: 72px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Altezza del logotipo: il componente rende un'immagine da dealers.tema.logo.
     Finche' il logo non c'e', la barra in alto resta senza marchio — mai testo
     ricomposto, mai il logo di un'altra concessionaria. */
  --wordmark-h: 22px;
}

/* Puntini dei caroselli: stessa struttura degli altri temi, colori di Matera. */
@media (max-width: 640px) {
  .promo-track,
  .bw-block .bw-track {
    --acb-gap: 12px;
    --acb-peek: 40px;
    --acb-dots: 1;
  }

  .acb-dots:not([hidden]) {
    --acb-dot: rgba(20, 32, 46, .22);
    --acb-dot-on: var(--blue, #0F4C81);
  }
  .bw-block .acb-dots:not([hidden]) {
    --acb-dot: rgba(255, 255, 255, .30);
    --acb-dot-on: var(--lime, #6EC6E8);
  }
}

@media (max-width: 900px) {
  .vd-foto-track {
    --acb-gap: 10px;
    --acb-peek: 34px;
    --acb-dots: 1;
  }
}