/* =========================================================
   Slow Weed — Design Tokens
   Estratti dal CSS live di slowweed.it (valori reali, non approssimati).
   Ogni landing/sezione deve consumare SOLO queste variabili.
   ========================================================= */

:root {
  /* ---------- COLORE ---------- */

  /* Background */
  --color-bg-main:        #FFFDF7;          /* crema caldo, off-white */
  --color-bg-soft:        #F5F2E7;          /* sabbia/avorio, sezioni alternate */
  --color-bg-card:        #FFFFFF;          /* card su sfondo crema */
  --color-bg-dark:        #2A302B;          /* footer / sezioni inverse */

  /* Foreground / testo */
  --color-text:           #2A302B;          /* testo principale (verde-nero desaturato) */
  --color-text-muted:     rgba(42, 48, 43, 0.62);
  --color-text-soft:      rgba(42, 48, 43, 0.45);
  --color-text-on-dark:   #FFFFFF;

  /* Bordi */
  --color-border:         rgba(42, 48, 43, 0.15);
  --color-border-soft:    rgba(42, 48, 43, 0.10);
  --color-border-strong:  #2A302B;

  /* Accenti puntuali */
  --color-accent-gold:    #EBBF20;          /* badge / award */

  /* Stati */
  --color-focus-ring:     rgba(42, 48, 43, 0.45);

  /* Overlay / utility */
  --color-overlay-2:      rgba(42, 48, 43, 0.02);
  --color-overlay-4:      rgba(42, 48, 43, 0.04);
  --color-overlay-8:      rgba(42, 48, 43, 0.08);


  /* ---------- TIPOGRAFIA ---------- */
  --font-stack-body:      "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-stack-heading:   "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fw-regular:           400;
  --fw-medium:            500;          /* body bold, menu, bottoni */
  --fw-bold:              700;          /* headings */

  --letter-spacing-base:  0;
  --letter-spacing-caps:  0;            /* nessun tracking, identico a slowweed */

  /* Scala fluida (clamp: mobile → desktop) */
  --fs-xs:    clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);   /* 12 → 13 */
  --fs-sm:    clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);   /* 13 → 14 */
  --fs-base:  clamp(0.9375rem, 0.9rem + 0.3vw, 1rem);        /* 15 → 16 */
  --fs-lg:    clamp(1.0625rem, 1rem + 0.4vw, 1.125rem);      /* 17 → 18 */
  --fs-h4:    clamp(1.125rem, 1rem + 0.6vw, 1.375rem);       /* 18 → 22 */
  --fs-h3:    clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);      /* 22 → 28 */
  --fs-h2:    clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);        /* 28 → 40 */
  --fs-h1:    clamp(2.25rem, 1.7rem + 2.8vw, 3.75rem);       /* 36 → 60 */
  --fs-display: clamp(2.75rem, 2rem + 3.5vw, 4.5rem);        /* 44 → 72 */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-base:    1.55;
  --lh-loose:   1.7;


  /* ---------- FORME & RAGGI ---------- */
  --radius-button:    30px;       /* pill */
  --radius-card:      10px;
  --radius-form:      5px;
  --radius-pill:      999px;
  --border-w:         1px;


  /* ---------- SPAZIATURE ---------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   32px;
  --space-8:   40px;
  --space-9:   50px;     /* container vertical-space base (slowweed) */
  --space-10:  64px;
  --space-12:  96px;

  --grid-gap:           26px;     /* slowweed default */
  --section-gap-y:      clamp(40px, 6vw, 80px);

  /* ---------- LAYOUT ---------- */
  --container-max:      1280px;
  --container-narrow:   880px;
  --container-pad-x:    clamp(16px, 4vw, 32px);


  /* ---------- OMBRE ---------- */
  /* slowweed non usa ombre sui bottoni; le card sono piatte. */
  --shadow-none:   0 0 0 transparent;
  --shadow-soft:   0 2px 12px rgba(42, 48, 43, 0.06);
  --shadow-md:     0 6px 24px rgba(42, 48, 43, 0.10);


  /* ---------- TRANSIZIONI ---------- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast:     150ms var(--ease-out);
  --t-base:     220ms var(--ease-out);
  --t-slow:     400ms var(--ease-out);


  /* ---------- Z-INDEX ---------- */
  --z-header:    50;
  --z-overlay:   80;
  --z-modal:     100;
}

/* Sezioni con sfondo scuro: invertiamo i token semantici */
.theme-dark {
  --color-bg-main:    #2A302B;
  --color-bg-soft:    #2A302B;
  --color-bg-card:    rgba(255, 255, 255, 0.04);
  --color-text:       #FFFFFF;
  --color-text-muted: rgba(255, 255, 255, 0.7);
  --color-text-soft:  rgba(255, 255, 255, 0.55);
  --color-border:     rgba(255, 255, 255, 0.18);
  --color-border-soft:rgba(255, 255, 255, 0.10);
  --color-border-strong: #FFFFFF;
}

/* Sezione "soft" (sabbia) */
.theme-soft {
  --color-bg-main:    #F5F2E7;
  --color-bg-card:    #FFFFFF;
}