/* =====================================================================
   COCAI — palette + tipografia (override del tema Resonance)
   Caricare come ULTIMO foglio CSS, cosi' vince su tutto.
   ===================================================================== */

:root {
  /* Marroni di brand */
  --color-dark-1:  #573530;
  --color-dark-2:  #462E25;
  --color-dark-3:  #8D6852;
  --color-dark-3a: #333333;
  --color-dark-4:  #555555;

  /* Scala neutra calda (greige) */
  --color-gray-1: #241A15;
  --color-gray-2: #6B5D55;
  --color-gray-3: #9A8D84;

  /* Superfici chiare calde */
  --color-gray-light-1: #FBEFDF;
  --color-gray-light-2: #EFE5D9;
  --color-gray-light-3: #E8E1D9;
  --color-gray-light-4: #DDD4CA;
  --color-gray-light-5: #CDC3B8;
  --color-gray-light-6: #BCB0A4;

  /* Grigi dark-mode */
  --color-dark-mode-gray-1: rgba(255,255,255,.7);
  --color-dark-mode-gray-2: rgba(255,255,255,.1275);

  /* Primari */
  --color-primary-1:         #573530;
  --color-primary-1-a:       #241A15;
  --color-primary-light-1:   #EFE5D9;
  --color-primary-light-1-a: #E2CEB6;
  --color-primary-2:         #FBEFDF;
  --color-primary-light-2:   #EFE5D9;
  --color-primary-3:         #FBEFDF;
  --color-primary-light-3:   #E2CEB6;
  --color-primary-4:         #B84A2E;  /* accento / CTA (terracotta) */
  --color-primary-light-4:   #F6DBD0;

  /* Secondari */
  --color-secondary-1: #FBEFDF;

  /* Token extra */
  --color-beige:        #E2CEB6;
  --color-accent:       #B84A2E;
  --color-accent-hover: #9E3D24;
  --color-accent-tint:  #F6DBD0;
  --color-gold:         #E8A33D;   /* solo accenti; su fondo oro testo #241A15 */

  /* Tipografia */
  --font-display:    var(--font-global);   /* titoli = DM Sans, nessun font nuovo */
  --font-global-alt: var(--font-global);   /* fix: era indefinita */
}

.dark-mode {
  --color-primary-4:   #D06A4A;
  --color-accent:      #D06A4A;
  --color-accent-hover:#E07C5B;
}

/* Titoli DM Sans piu' decisi (tema: 500 -> qui 700 su h1-h3) */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font-display); }
h1, .h1, h2, .h2, h3, .h3   { font-weight: 700; }

/* Scala fluida (togli questo blocco per tornare ai px fissi del tema) */
h1, .h1 { font-size: clamp(2rem,    1.40rem + 2.0vw, 2.625rem); }
h2, .h2 { font-size: clamp(1.75rem, 1.30rem + 1.6vw, 2.25rem);  }
h3, .h3 { font-size: clamp(1.50rem, 1.25rem + 0.9vw, 1.75rem);  }