/* ============================================================
   PALETTE COLORI — Il Giardino delle Camelie
   Estratta direttamente da camelie.png (logo principale)
   Analisi colorimetrica quantitativa dei pixel del logo
   ============================================================ */

:root {
  /* ================================================================
     ROSSI CAMELIA — Petali del fiore (31.6% dei pixel opachi)
     Il rosso camelia è il colore identitario principale
     ================================================================ */

  /* Rosso camelia profondo (dominante: hue≈0°, L≈45%) */
  --color-camelia:            #cf1822;   /* rosso camelia principale */
  --color-camelia-dark:       #8b1017;   /* +scuro del 30% */
  --color-camelia-verydark:   #750301;   /* tono scurissimo, per ombre/testo scuro */
  --color-camelia-light:      #e6454d;   /* +chiaro del 15%, per hover */
  --color-camelia-bright:     #d8192c;   /* variante più brillante (hue≈350°) */

  /* Rosa petalo (12.3% — zone illuminate dei petali) */
  --color-rosa:               #f8817a;   /* rosa caldo principale */
  --color-rosa-light:         #f79b8e;   /* rosa pesca chiaro */
  --color-rosa-pale:          #f1c3c9;   /* rosa pallido, per sfondi delicati */
  --color-rosa-verypale:      #fae8ed;   /* rosa quasi bianco, per overlay */

  /* ================================================================
     VERDI FOGLIA — Foglie della camelia (34.1% dei pixel opachi)
     ================================================================ */

  /* Verde oliva dominante (hue≈70°, L≈33%) */
  --color-olive:              #6a7535;   /* verde oliva principale */
  --color-olive-dark:         #43541c;   /* verde scuro (hue≈80°, L≈22%) */
  --color-olive-verydark:     #1a3107;   /* verde scurissimo, quasi nero */
  --color-olive-light:        #95985b;   /* verde salvia chiaro (hue≈60°, L≈48%) */
  --color-olive-pale:         #b5b88a;   /* verde più tenue per sfondi */

  /* ================================================================
     CREMA — Sfondo del logo (21.2% dei pixel opachi)
     ================================================================ */

  --color-cream:              #ead7c4;   /* crema caldo (hue≈30°) */
  --color-cream-light:        #f5ede2;   /* crema chiaro, per sfondo pagina */
  --color-cream-cool:         #e4dccc;   /* crema freddo (hue≈40°) */
  --color-cream-pale:         #f9f5ef;   /* quasi bianco caldo */

  /* ================================================================
     FUNZIONALI — Bianchi, grigi, testo
     ================================================================ */

  --color-white:              #fdfaf6;   /* bianco caldo */
  --color-offwhite:           #f7f2ea;   /* bianco sporco caldo */
  --color-gray-100:           #f0ece4;   /* grigio caldo chiarissimo */
  --color-gray-200:           #d9d2c5;   /* grigio caldo chiaro, bordi */
  --color-gray-500:           #8c8476;   /* grigio medio, testo muted */
  --color-gray-800:           #3d3830;   /* grigio scuro caldo */
  --color-black:              #1f1812;   /* quasi nero caldo (marrone scurissimo) */

  /* ================================================================
     ALIAS SEMANTICI — Da usare nei CSS del tema WordPress
     ================================================================ */

  /* Primario = identità camelia */
  --color-primary:            var(--color-camelia);
  --color-primary-dark:       var(--color-camelia-dark);
  --color-primary-light:      var(--color-camelia-light);
  --color-primary-pale:       var(--color-rosa-pale);

  /* Secondario = verde foglia */
  --color-secondary:          var(--color-olive);
  --color-secondary-dark:     var(--color-olive-dark);
  --color-secondary-light:    var(--color-olive-light);

  /* Accento = rosa caldo */
  --color-accent:             var(--color-rosa);
  --color-accent-light:       var(--color-rosa-light);
  --color-accent-pale:        var(--color-rosa-pale);

  /* Sfondi */
  --color-bg-page:            var(--color-white);
  --color-bg-warm:            var(--color-offwhite);
  --color-bg-cream:           var(--color-cream);
  --color-bg-section:         var(--color-cream-pale);

  /* Testo */
  --color-text:               var(--color-black);
  --color-text-light:         var(--color-gray-500);
  --color-text-muted:         var(--color-gray-500);
  --color-heading:            #3a2e26;   /* marrone scuro, più morbido del nero puro */

  /* Link e interazioni */
  --color-link:               var(--color-camelia);
  --color-link-hover:         var(--color-camelia-light);
  --color-border:             var(--color-gray-200);

  /* Pulsanti */
  --color-btn-primary-bg:     var(--color-camelia);
  --color-btn-primary-text:   var(--color-white);
  --color-btn-primary-hover:  var(--color-camelia-dark);
  --color-btn-secondary-bg:   var(--color-olive);
  --color-btn-secondary-text: var(--color-white);

  /* ================================================================
     TIPOGRAFIA
     ================================================================ */
  --font-heading:             Georgia, 'Times New Roman', serif;
  --font-body:                system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ================================================================
     SFUMATURE — Gradienti pronti all'uso
     ================================================================ */
  --gradient-camelia:         linear-gradient(135deg, var(--color-camelia), var(--color-camelia-bright));
  --gradient-olive:           linear-gradient(135deg, var(--color-olive), var(--color-olive-dark));
  --gradient-petal:           linear-gradient(135deg, var(--color-rosa), var(--color-rosa-light));
}