/* =========================================================
   Design tokens — Wellness of Future
   Allineati al sito principale (https://wellnessoffuture.com/prova/)
   ========================================================= */
:root {
  /* Brand */
  --color-primary:        #64BBAC;
  --color-primary-hover:  #4FA493;
  --color-primary-dark:   #106758;
  --color-primary-light:  #8DD4C7;
  --color-accent:         #61CE70;
  --color-gold:           #c9b97a;
  --color-gold-light:     #d4c98e;

  /* Testo */
  --color-text:           #222222;
  --color-text-soft:      #555555;
  --color-text-muted:     #888888;
  --color-text-on-primary:#ffffff;
  --color-text-on-dark:   rgba(255,255,255,0.75);

  /* Sfondi */
  --color-bg:             #F5F1E6;        /* warm beige - sfondo principale */
  --color-bg-white:       #FFFFFF;
  --color-bg-soft:        #F5F5F5;
  --color-bg-card:        #FFFFFF;
  --color-bg-dark:        #0B0B0B;

  /* Bordi */
  --color-border:         #EAEAEA;
  --color-border-strong:  #DADADA;

  /* Stati */
  --color-success:        #5cb85c;
  --color-success-light:  #eaf6ef;
  --color-error:          #d9534f;
  --color-error-light:    #fbeaea;
  --color-warning:        #f0ad4e;
  --color-warning-light:  #fdf3e2;
  --color-info:           #4a9bd9;
  --color-info-light:     #e6f2fa;

  /* Tipografia */
  --font-heading: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --font-body:    'Montserrat', Arial, sans-serif;
  --font-tag:     'Nanum Gothic', sans-serif;

  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-md:    1.125rem;
  --fs-lg:    1.25rem;
  --fs-xl:    1.5rem;
  --fs-2xl:   2rem;
  --fs-3xl:   2.5rem;
  --fs-4xl:   3rem;

  --lh-tight: 1.15;
  --lh-base:  1.6;
  --lh-loose: 1.75;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* Spaziature */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;

  /* Border radius (allineati al sito) */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  20px;
  --radius-pill: 30px;

  /* Ombre (più pronunciate, in stile WoF) */
  --shadow-sm:   0 4px 16px rgba(0,0,0,0.06);
  --shadow-md:   0 12px 36px rgba(0,0,0,0.10);
  --shadow-lg:   0 24px 60px rgba(0,0,0,0.14);
  --shadow-xl:   0 16px 40px rgba(44,62,58,0.12);
  --shadow-teal: 0 12px 30px rgba(100,187,172,0.35);

  /* Transizioni */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* Layout */
  --container-max:    1140px;
  --container-narrow: 720px;
  --header-height:    72px;

  /* Z-index */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   500;
  --z-modal:     1000;
  --z-toast:     2000;
}