/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 19 2026 | 08:18:25 */
/* ==========================================================================
   CONTE MANGESA — DESIGN SYSTEM
   Snippet:      cm-design-system
   Dove:         Custom CSS & JS → Frontend → Header → File esterno
   Contiene:     1. variabili globali (colori, font, spaziature)
                 2. stile base della pagina (sfondo, testo, link)
   NON contiene: stili delle singole sezioni (ognuna ha il suo snippet)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. VARIABILI
   Per cambiare un colore o una misura in TUTTO il sito, si cambia qui.
   -------------------------------------------------------------------------- */
:root {

  /* ===== COLORI — palette ufficiale ===== */
  --cm-black: #231f20;                          /* Nero brand: sfondo del sito */
  --cm-gold: #ffbc2f;                           /* Oro Mangesa: accenti, bottoni */
  --cm-white: #ffffff;                          /* Bianco: testo principale */

  /* ===== COLORI — derivate ===== */
  --cm-black-light: #2e2a2b;                    /* card e sezioni alternate */
  --cm-white-muted: rgba(255, 255, 255, 0.75);  /* testo secondario */
  --cm-white-faint: rgba(255, 255, 255, 0.4);   /* placeholder dei campi */
  --cm-white-border: rgba(255, 255, 255, 0.25); /* bordi dei campi modulo */
  --cm-white-line: rgba(255, 255, 255, 0.12);   /* linee divisorie sottili */
  --cm-gold-hover: #e5a828;                     /* hover bottoni */
  --cm-gold-subtle: rgba(255, 188, 47, 0.3);    /* bordi oro sottili */
  --cm-overlay: rgba(35, 31, 32, 0.6);          /* overlay su immagini */
  --cm-overlay-strong: rgba(35, 31, 32, 0.82);  /* overlay forte */

  /* ===== FONT ===== */
  --cm-font-display: 'Oswald', 'Arial Narrow', sans-serif;      /* MAIUSCOLO */
  --cm-font-body: 'Cormorant Garamond', Georgia, serif;         /* minuscolo */

  /* ===== SPAZIATURE ===== */
  --cm-space-xs: 8px;
  --cm-space-sm: 16px;
  --cm-space-md: 24px;
  --cm-space-lg: 32px;
  --cm-space-xl: 48px;
  --cm-space-2xl: 64px;
  --cm-space-3xl: 80px;
  --cm-space-4xl: 120px;

  /* ===== LAYOUT ===== */
  --cm-container: 1280px;           /* larghezza massima dei contenuti */
  --cm-gutter: 80px;                /* margine laterale (cambia su tablet/mobile) */
  --cm-section-space: 120px;        /* spazio sopra/sotto le sezioni (cambia su tablet/mobile) */
  --cm-radius-sm: 4px;              /* bottoni e campi modulo */
  --cm-radius: 12px;                /* box */
  --cm-radius-lg: 16px;             /* cornici e card */
  --cm-border-gold: 1.5px solid var(--cm-gold);   /* cornice dorata del brand */

  /* ===== ANIMAZIONI ===== */
  --cm-transition: 0.25s ease;
}

/* Tablet (fino a 1024px) — stessi breakpoint di Elementor */
@media (max-width: 1024px) {
  :root {
    --cm-gutter: 48px;
    --cm-section-space: 96px;
  }
}

/* Mobile (fino a 767px) — stessi breakpoint di Elementor */
@media (max-width: 767px) {
  :root {
    --cm-gutter: 24px;
    --cm-section-space: 72px;
  }
}


/* --------------------------------------------------------------------------
   2. STILE BASE DELLA PAGINA
   "html body" è volutamente più forte degli stili di default del tema.
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;          /* scorrimento morbido verso le àncore (#extra-dry) */
}

html body {
  background-color: var(--cm-black);
  color: var(--cm-white);
  font-family: var(--cm-font-body);
  font-size: 19px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html body a {
  color: var(--cm-gold);
  transition: color var(--cm-transition);
}

html body a:hover,
html body a:focus {
  color: var(--cm-gold-hover);
}

::selection {
  background-color: var(--cm-gold);
  color: var(--cm-black);
}