/* ==========================================================================
   tokens.css — Design tokens (Cascina Sciolla)
   Regola 10b: TUTTI i colori/dimensioni del tema vivono QUI come custom
   properties. Nessun valore hardcoded negli HTML o negli altri CSS.
   Palette verificata dal logo (docs/BRAND.md).
   ========================================================================== */

:root {
  /* --- Palette (HEX) ------------------------------------------------------ */
  --c-cream:      #EDEFCA; /* crema del brand */
  --c-paper:      #FAFBF0; /* fondo pagina */
  --c-white:      #FFFFFF; /* card / superfici */
  --c-green-900:  #34411F; /* verde profondo (titoli su chiaro) */
  --c-green-800:  #3E4E28; /* testo verde scuro */
  --c-green-700:  #5B6D3A; /* verde primario (wordmark, CTA, link) */
  --c-green-500:  #748756; /* verde foglia (accenti, hover) */
  --c-green-300:  #A9B389; /* salvia tenue (bordi, dettagli) */
  --c-green-100:  #D0D5B0; /* verde pallido (fondi tenui) */
  --c-brown-800:  #613A19; /* marrone tronco (accento caldo) */
  --c-brown-600:  #8D6F4D; /* legno chiaro (accento secondario) */
  --c-ink:        #24291C; /* testo principale */
  --c-muted:      #5A6150; /* testo secondario */
  --c-line:       #DFE3C4; /* bordi / divisori */

  /* --- Triple RGB (per superfici con alpha; unico posto coi valori) ------- */
  --rgb-green-900: 52 65 31;
  --rgb-green-800: 62 78 40;
  --rgb-ink:       36 41 28;
  --rgb-cream:     237 239 202;
  --rgb-white:     255 255 255;

  /* --- Semantici (derivati, nessun nuovo colore) -------------------------- */
  --bg:            var(--c-paper);
  --fg:            var(--c-ink);
  --brand:         var(--c-green-700);
  --brand-strong:  var(--c-green-900);
  --accent:        var(--c-brown-800);
  --link:          var(--c-green-700);
  --link-hover:    var(--c-green-900);
  --cta-bg:        var(--c-green-700);
  --cta-fg:        var(--c-cream);
  --cta-bg-hover:  var(--c-green-800);
  --surface:       var(--c-white);
  --surface-tint:  var(--c-cream);
  --border:        var(--c-line);
  --focus-ring:    var(--c-green-700);

  /* Overlay su immagini scure (contrasto AA per il testo hero) */
  --hero-overlay: linear-gradient(
      180deg,
      rgb(var(--rgb-green-900) / 0.28) 0%,
      rgb(var(--rgb-green-900) / 0.58) 100%);
  --backdrop: rgb(var(--rgb-ink) / 0.88);
  --scrim: rgb(var(--rgb-green-900) / 0.45);

  /* --- Tipografia --------------------------------------------------------- */
  --ff-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --ff-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-hero:  clamp(2.4rem, 6vw, 4.5rem);
  --fs-h2:    clamp(1.8rem, 3.5vw, 2.75rem);
  --fs-h3:    clamp(1.25rem, 2vw, 1.6rem);
  --fs-body:  clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --lh-tight: 1.1;
  --lh-body: 1.65;

  /* --- Spazi -------------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --sp-10: 128px;
  --section-pad: clamp(3.5rem, 8vw, 8rem);

  /* --- Forma / ombre ------------------------------------------------------ */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-pill: 999px;
  --sh-1: 0 1px 2px rgb(var(--rgb-green-900) / 0.06);
  --sh-2: 0 12px 32px rgb(var(--rgb-green-900) / 0.10);
  --sh-focus: 0 0 0 3px rgb(var(--rgb-green-900) / 0.35);

  /* --- Layout ------------------------------------------------------------- */
  --container: 1200px;
  --measure: 68ch;
  --header-h: 72px;
  --header-h-compact: 58px;
  --editor-wrap: 1080px; /* larghezza area di modifica nel block editor (wp-admin) */

  /* --- Motion (≤200ms, solo transform/opacity) --------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 120ms;
  --t: 180ms;

  /* --- z-index ------------------------------------------------------------ */
  --z-totop: 90;
  --z-header: 100;
  --z-drawer: 200;
  --z-lightbox: 300;
}