/* Skinpetcare - design system: token. Unico punto in cui compaiono i valori esadecimali. */
:root {
  /* Sfondi e testi */
  --ds-bg: #FAF8F5;            /* sfondo chiaro di base */
  --ds-bg-alt: #F2EEE9;        /* sfondo primario: blocchi differenziati e testo su fondi scuri */
  --ds-text: #56514C;          /* testo e colori scuri */
  --ds-text-soft: #7F7970;     /* marrone chiaro: solo elementi decorativi */

  /* Accent delle lozioni (solo in riferimento alle lozioni); hover = -15% di luminosita' */
  --ds-carezza: #649D97;  --ds-carezza-hover: #558580;
  --ds-soffio:  #7392A8;  --ds-soffio-hover:  #627C8F;
  --ds-velo:    #8D5A69;  --ds-velo-hover:    #784D59;

  /* Font */
  --ds-font-title: 'Baskervville', Georgia, serif;
  --ds-font-body: 'Nunito Sans', sans-serif;

  /* Raggi */
  --ds-r-card: 2.5vh;
  --ds-r-img: 2.5vh;
  --ds-r-btn: 100vh;

  /* Token aggiuntivi usati dai componenti (valori invariati rispetto al CSS precedente) */
  --ds-text-hover: #3F3B37;     /* hover del pulsante primario */
  --ds-link: #3C5F5B;           /* link */
  --ds-link-hover: #507E7A;     /* link in hover */
  --ds-btn-text: #1F1F1F;       /* testo su sfondo verde nelle opzioni selezionate */
  --ds-line: rgba(86, 82, 76, .25);

  /* Scala tipografica */
  --ds-h1: clamp(2.25rem, 1.6rem + 2.8vw, 4rem);
  --ds-h2: clamp(1.875rem, 1.4rem + 2vw, 3rem);
  --ds-h3: clamp(1.5rem, 1.25rem + 1vw, 2.125rem);
  --ds-h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --ds-p: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);

  /* Spaziature */
  --ds-s1: 0.25rem;
  --ds-s2: 0.5rem;
  --ds-s3: clamp(0.75rem, 0.7rem + 0.2vw, 1rem);
  --ds-s4: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
  --ds-s5: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --ds-s6: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  --ds-section: clamp(4rem, 2.5rem + 6vw, 7.5rem);
}

/* -- PULSANTI ------------------------------------------------------------
   Varianti: ds-btn-primary (marrone), ds-btn-secondary (bordo marrone), ds-btn-carezza / ds-btn-soffio / ds-btn-velo (solo lozioni).
   Hover con variabili; !important perche' il tema genitore ha selettori piu' forti. */
.wp-block-button[class*="ds-btn-"] .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  box-sizing: border-box; min-height: 3rem; padding: 0.875rem 1.75rem;
  font-family: var(--ds-font-body); font-weight: 600; font-size: 1rem; line-height: 1.2; letter-spacing: 0.02em;
  border: 2px solid var(--ds-btn-bg); border-radius: var(--ds-r-btn); text-decoration: none;
  background: var(--ds-btn-bg) !important; color: var(--ds-btn-color) !important;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.wp-block-button.ds-btn-primary   { --ds-btn-bg: var(--ds-text);    --ds-btn-color: var(--ds-bg-alt); --ds-btn-bg-hover: #3F3B37;                 --ds-btn-color-hover: var(--ds-bg-alt); }
.wp-block-button.ds-btn-secondary { --ds-btn-bg: transparent;       --ds-btn-color: var(--ds-text);   --ds-btn-bg-hover: var(--ds-bg-alt);       --ds-btn-color-hover: var(--ds-text); }
.wp-block-button.ds-btn-secondary .wp-block-button__link { border-color: var(--ds-text); }
.wp-block-button.ds-btn-carezza   { --ds-btn-bg: var(--ds-carezza); --ds-btn-color: var(--ds-bg-alt); --ds-btn-bg-hover: var(--ds-carezza-hover); --ds-btn-color-hover: var(--ds-bg-alt); }
.wp-block-button.ds-btn-soffio    { --ds-btn-bg: var(--ds-soffio);  --ds-btn-color: var(--ds-bg-alt); --ds-btn-bg-hover: var(--ds-soffio-hover);  --ds-btn-color-hover: var(--ds-bg-alt); }
.wp-block-button.ds-btn-velo      { --ds-btn-bg: var(--ds-velo);    --ds-btn-color: var(--ds-bg-alt); --ds-btn-bg-hover: var(--ds-velo-hover);    --ds-btn-color-hover: var(--ds-bg-alt); }
.wp-block-button[class*="ds-btn-"] .wp-block-button__link:focus-visible { outline: 3px solid var(--ds-text); outline-offset: 3px; }
@media (hover: hover) {
  .wp-block-button[class*="ds-btn-"] .wp-block-button__link:hover { background: var(--ds-btn-bg-hover) !important; color: var(--ds-btn-color-hover) !important; border-color: var(--ds-btn-bg-hover); }
  .wp-block-button.ds-btn-secondary .wp-block-button__link:hover { border-color: var(--ds-text); }
}
@media (max-width: 781px) {
  .wp-block-buttons.ds-btn-stack { flex-direction: column; align-items: stretch; }
  .wp-block-buttons.ds-btn-stack .wp-block-button, .wp-block-buttons.ds-btn-stack .wp-block-button__link { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .wp-block-button[class*="ds-btn-"] .wp-block-button__link { transition: none; } }