/* ==========================================================================
   BERTOLDI BOATS — Design Tokens
   Fonte: Figma "Bertoldi boats - file condiviso" → pagina "booking engine"

   Questo file e' l'unico punto di verita' per colori, tipografia,
   spaziature, raggi e ombre del design system.
   Ogni altro CSS deve referenziare queste variabili.
   ========================================================================== */

:root {

  /* -----------------------------------------------------------------------
     COLORI
     Nomi allineati alle variabili Figma.
     ----------------------------------------------------------------------- */

  /* Primario — titoli, pulsanti, link attivi, stepper attivo */
  --bb-color-primary:        #00396b;   /* Figma: --blu-accento */

  /* Testo principale e sfondi modali */
  --bb-color-text:           #1e1e1e;   /* Figma: --colore-testi-e-sfondi-modali */

  /* Background pagina */
  --bb-color-bg:             #f4f3f0;   /* Figma: --grigio-chiaro */

  /* Bianco — card, contenitori, testo su sfondi scuri */
  --bb-color-white:          #ffffff;   /* Figma: --bianco */

  /* Bordi input, select, radio group */
  --bb-color-outline:        #a28f6e;   /* Figma: --outline */

  /* Variante "Exclusive" — pulsanti e bordi tour exclusive */
  --bb-color-exclusive:      #3a3741;   /* Figma: --brown-exclusive — sfondo, bottoni */
  --bb-color-exclusive-bg:   #3a3741;   /* Sfondo pagine Exclusive */
  --bb-color-exclusive-accent: #a28f6e; /* Bordi input Exclusive — uguale a --outline */
  --bb-color-exclusive-gold: #d4b07f;   /* Dorato — stepper attivo, badge Exclusive */
  --bb-color-exclusive-text: #ffffff;   /* Testo chiaro su sfondo scuro */

  /* Overlay immagini card */
  --bb-overlay-standard:     rgba(65, 79, 104, 0.7);
  --bb-overlay-exclusive:    rgba(65, 55, 62, 0.7);


  /* -----------------------------------------------------------------------
     TIPOGRAFIA
     Font unico: Montserrat (gia' caricato in meta.php).
     Poppins non e' usato nel nuovo design e puo' essere rimosso.
     ----------------------------------------------------------------------- */

  --bb-font-family:          "Montserrat", sans-serif;

  /* Scale */
  --bb-font-size-xs:         14px;     /* label, testi secondari, "Indietro" */
  --bb-font-size-base:       16px;     /* corpo, descrizioni, pulsanti */
  --bb-font-size-lg:         24px;     /* titoli pagina, nomi tour, prezzi grandi */

  /* Pesi */
  --bb-font-weight-regular:  400;
  --bb-font-weight-bold:     700;

  /* Interlinea */
  --bb-line-height-tight:    1.3;      /* titoli (lg/bold) */
  --bb-line-height-normal:   1.5;      /* corpo e label */


  /* -----------------------------------------------------------------------
     SPAZIATURE
     Valori ricorrenti nei frame Figma.
     ----------------------------------------------------------------------- */

  --bb-space-xs:             4px;      /* icona-testo inline */
  --bb-space-sm:             6px;      /* label → input */
  --bb-space-md:             8px;      /* checkbox-label, gap interni */
  --bb-space-lg:             16px;     /* tra form-group, padding card */
  --bb-space-xl:             24px;     /* gap colonne, sezioni */
  --bb-space-2xl:            32px;     /* sezioni maggiori */
  --bb-space-3xl:            40px;     /* gap form/sidebar pagamento */


  /* -----------------------------------------------------------------------
     BORDER RADIUS
     ----------------------------------------------------------------------- */

  --bb-radius-sm:            4px;      /* pulsanti, input, select, checkbox, sidebar */
  --bb-radius-md:            8px;      /* card principali */


  /* -----------------------------------------------------------------------
     OMBRE
     Un unico pattern in tutto il design Figma.
     ----------------------------------------------------------------------- */

  --bb-shadow-card:          2px 4px 10px rgba(0, 0, 0, 0.11);


  /* -----------------------------------------------------------------------
     INPUT / FORM
     ----------------------------------------------------------------------- */

  --bb-input-height:         48px;
  --bb-input-padding:        8px;
  --bb-input-border-color:   var(--bb-color-outline);
  --bb-input-radius:         var(--bb-radius-sm);
  --bb-input-font-size:      var(--bb-font-size-xs);


  /* -----------------------------------------------------------------------
     PULSANTI
     ----------------------------------------------------------------------- */

  --bb-btn-padding-x:        30px;
  --bb-btn-padding-y:        12px;
  --bb-btn-radius:           var(--bb-radius-sm);
  --bb-btn-font-size:        var(--bb-font-size-base);
  --bb-btn-font-weight:      var(--bb-font-weight-bold);


  /* -----------------------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------------------- */

  --bb-content-max-width:    1024px;   /* larghezza card principale nel booking */
  --bb-sidebar-width:        326px;    /* sidebar recap pagamento */
  --bb-image-size:            337px;    /* immagine quadrata nel form booking */
  --bb-card-padding:         var(--bb-space-lg);
  --bb-card-gap:             22px;     /* gap immagine-form dentro la card */


  /* -----------------------------------------------------------------------
     LEGACY — variabili usate dalla pagina coupon (style.css righe 638+)
     Erano inline in acquista-coupon.php.
     Da rimuovere quando i coupon verranno migrati ai nuovi tokens --bb-*.
     ----------------------------------------------------------------------- */

  --primary-color:           #007bff;
  --primary-light:           #e7f3ff;
  --primary-dark:            #0056b3;
  --secondary-color:         #f8f9fa;
  --success-color:           #28a745;
  --success-light:           #e8f5e8;
  --text-color:              #333;
  --text-light:              #666;
  --text-lighter:            #888;
  --border-color:            #ddd;
  --white:                   #fff;
  --border-radius:           5px;
  --font-size-base:          16px;
  --font-size-small:         14px;
  --font-size-tiny:          12px;
  --font-size-h3:            18px;
  --font-size-h4:            16px;
  --spacing-small:           10px;
  --spacing-medium:          15px;
  --spacing-large:           20px;
  --spacing-xl:              30px;

}