/* =========================================================================
   variables.css — palette e token di design
   Tema normale + Modalita sollievo (body.relief)
   ========================================================================= */

:root {
  color-scheme: light;

  /* --- Colori: superfici --- */
  --bg:            #f1eff4;
  --surface:       #ffffff;
  --surface-alt:   #f8f7fb;
  --surface-sunk:  #efedf3;
  --border:        #e4e1ea;
  --border-strong: #d3cfdc;

  /* --- Colori: testo --- */
  --text:        #2f2c38;
  --text-soft:   #6f6b7a;
  --text-faint:  #9b97a7;
  --text-on-accent: #ffffff;

  /* --- Colori: primario (indaco calmo) --- */
  --primary:        #6b6f9e;
  --primary-strong: #565a86;
  --primary-soft:   #e7e7f2;

  /* --- Colori: accento CTA (corallo morbido) --- */
  --accent:        #d98e7a;
  --accent-strong: #c4795f;
  --accent-soft:   #f6e4de;

  /* --- Colori: stato --- */
  --danger:       #c96a6a;
  --danger-soft:  #f4dede;
  --success:      #6fae8e;
  --success-soft: #dff0e8;
  --warning:      #d9a86a;

  /* --- Calendario: livelli intensita --- */
  --cal-none:     #f4f3f7;
  --cal-mild:     #f6e6c4;
  --cal-moderate: #ecc199;
  --cal-severe:   #e09a9a;
  --cal-aura:     #a594cf;   /* indicatore aura */
  --cal-med:      #85a9c9;   /* indicatore farmaco */
  --cal-text:     #2f2c38;

  /* --- Tipografia --- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs:   0.78rem;
  --fs-sm:   0.88rem;
  --fs-base: 1rem;
  --fs-lg:   1.15rem;
  --fs-xl:   1.4rem;
  --fs-xxl:  2rem;

  /* --- Spaziatura --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;

  /* --- Forme --- */
  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* --- Ombre --- */
  --shadow-sm: 0 1px 3px rgba(45, 40, 60, 0.07);
  --shadow:    0 4px 14px rgba(45, 40, 60, 0.10);
  --shadow-lg: 0 10px 30px rgba(45, 40, 60, 0.14);

  /* --- Misure --- */
  --tap: 48px;                 /* area minima toccabile */
  --topbar-h: 56px;
  --bottomnav-h: 68px;
  --content-max: 560px;        /* larghezza max contenuto (mobile-first) */

  /* --- Transizioni --- */
  --transition: 160ms ease;
}

/* =========================================================================
   MODALITA SOLLIEVO — basso contrasto, colori desaturati, niente animazioni
   ========================================================================= */
body.relief {
  /* Superfici: niente bianchi puri, niente neri pieni */
  --bg:            #e7e5e0;
  --surface:       #f0eeea;
  --surface-alt:   #ebe9e4;
  --surface-sunk:  #e3e1db;
  --border:        #dad7d0;
  --border-strong: #cbc8c0;

  /* Testo: contrasto ridotto */
  --text:       #4c4842;
  --text-soft:  #7d7a72;
  --text-faint: #a39f96;
  --text-on-accent: #f3f1ec;

  /* Primario desaturato */
  --primary:        #82869c;
  --primary-strong: #6e7288;
  --primary-soft:   #e0e0e4;

  /* Accento desaturato */
  --accent:        #c39b8f;
  --accent-strong: #ad8678;
  --accent-soft:   #e6dcd6;

  /* Stato desaturato */
  --danger:       #b58585;
  --danger-soft:  #e6d9d9;
  --success:      #8aa896;
  --success-soft: #dde7e0;
  --warning:      #c8a880;

  /* Calendario desaturato */
  --cal-none:     #e9e7e2;
  --cal-mild:     #e7dcc2;
  --cal-moderate: #d8bda1;
  --cal-severe:   #cfa9a9;
  --cal-aura:     #a79bbe;
  --cal-med:      #95a9bd;
  --cal-text:     #4c4842;

  /* Ombre attenuate */
  --shadow-sm: 0 1px 2px rgba(70, 65, 60, 0.05);
  --shadow:    0 2px 8px rgba(70, 65, 60, 0.07);
  --shadow-lg: 0 4px 14px rgba(70, 65, 60, 0.09);

  /* Spaziatura leggermente aumentata */
  --sp-3: 0.85rem;
  --sp-4: 1.15rem;
  --sp-5: 1.7rem;
  --sp-6: 2.3rem;

  /* Niente animazioni */
  --transition: 0ms;
}

/* In modalita sollievo disattiva ogni transizione/animazione residua */
body.relief * {
  transition: none !important;
  animation: none !important;
}