/* ════════════════════════════════════════════════════════════════════
   THEANA — DESIGN TOKENS
   Direzione "C — Naturale luminoso" · Palette P·2 "Foglia & ambra"
   Tipografia: Cormorant Garamond + Manrope + JetBrains Mono · Scala B

   Questo file è la SINGOLA fonte di verità per colori, tipografia,
   spaziature, raggi e ombre. Caricarlo come PRIMO foglio di stile del tema.
   Tutto il resto del CSS deve usare queste var(--…). Non scrivere mai
   valori hex/px hard-coded altrove.
   ════════════════════════════════════════════════════════════════════ */

/* ── Font self-hosted (subset latin) ──────────────────────────────── */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-500-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/manrope-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {

  /* ───────── COLORE ─────────────────────────────────────────────────
     Palette P·2 "Foglia & ambra". Verde foglia = primario (brand, CTA),
     ambra/terracotta = accento (prezzi in evidenza, link, dettagli).
     Sfondi caldi color carta/crema, MAI bianco puro. */

  --color-paper:       #FAF1E1;  /* sfondo pagina principale (crema caldo)   */
  --color-paper-soft:  #EFE3CC;  /* sfondo sezioni alternate / card neutre   */
  --color-surface:     #E5D3B0;  /* superfici più sature (sabbia)            */
  --color-primary:     #3D4F35;  /* verde foglia — brand, bottoni, header    */
  --color-accent:      #B17A3F;  /* ambra/terracotta — accenti, prezzi, link */
  --color-accent-light:#E3B47B;  /* ambra chiara — testo su fondo verde (footer headings, em) */
  --color-ink:         #1F1A14;  /* testo principale (quasi-nero caldo)      */
  --color-muted:       #736249;  /* testo secondario / caption               */
  --color-rule:        rgba(31, 26, 20, 0.14); /* bordi, separatori          */

  /* Stati / feedback (derivati, armonici con la palette) */
  --color-primary-hover: #33422C; /* verde più scuro per hover bottoni      */
  --color-accent-hover:  #9A682F; /* ambra più scura per hover link         */
  --color-success:       #4C7A3F; /* conferme (verde)                       */
  --color-error:         #A6442E; /* badge limitato/offerta, prezzi scontati, errori/validazione */
  --color-on-primary:    #FAF1E1; /* testo su fondo verde (= paper)         */
  --color-on-accent:     #FAF1E1; /* testo su fondo ambra                   */

  /* ───────── TIPOGRAFIA — FAMIGLIE ─────────────────────────────────── */

  --font-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:  "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Ruoli:
     serif → hero, nomi prodotto, titoli articolo, accenti emotivi (italic)
     sans  → UI, body, prezzi, filtri, tabelle, form
     mono  → eyebrow MAIUSCOLE, metadati, caption, badge testuali        */

  /* ───────── TIPOGRAFIA — SCALA B (equilibrata e-commerce) ───────────
     Coppia desktop / mobile. Usare le coppie size+line-height insieme.
     Pesi: serif 500 · sans 400 body / 600 heading-UI · mono 500.         */

  /* DISPLAY — hero homepage (serif) */
  --fs-display:        72px;  --fs-display-m:   44px;
  --lh-display:        1.0;   --ls-display:    -1.5px;

  /* H1 — titolo pagina (serif) */
  --fs-h1:             48px;  --fs-h1-m:        32px;
  --lh-h1:             1.05;  --ls-h1:         -0.7px;

  /* H2 — titolo sezione (serif) */
  --fs-h2:             36px;  --fs-h2-m:        26px;
  --lh-h2:             1.15;  --ls-h2:         -0.3px;

  /* H3 — sotto-sezione / nome prodotto in card (SANS, 600) */
  --fs-h3:             22px;  --fs-h3-m:        19px;
  --lh-h3:             1.3;

  /* H4 — micro-titolo UI (SANS, 600) */
  --fs-h4:             18px;  --fs-h4-m:        17px;
  --lh-h4:             1.35;

  /* BODY L — intro / paragrafo prominente (sans) */
  --fs-body-l:         17px;  --fs-body-l-m:    16px;
  --lh-body-l:         1.55;

  /* BODY — testo corrente (sans) */
  --fs-body:           15px;  --fs-body-m:      15px;
  --lh-body:           1.6;

  /* SMALL — note, meta, disclaimer (sans) */
  --fs-small:          13px;  --fs-small-m:     13px;
  --lh-small:          1.5;

  /* CAPS — eyebrow / etichette maiuscole (mono, letter-spacing ampio) */
  --fs-caps:           10px;  --fs-caps-m:      10px;
  --lh-caps:           1.4;   --ls-caps:        1.5px;

  /* Pesi nominati */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* ───────── SPAZIATURE — base 4px ─────────────────────────────────── */
  --sp-1:   4px;   /* gap micro · etichette                          */
  --sp-2:   8px;   /* gap interno chip · icon-text                   */
  --sp-3:  12px;   /* gap small · liste compatte                     */
  --sp-4:  16px;   /* padding card · gap tag                         */
  --sp-5:  24px;   /* tra-elementi · padding form · padding side mob */
  --sp-6:  32px;   /* tra-blocchi · padding sezione                  */
  --sp-7:  48px;   /* tra-sezioni piccole                            */
  --sp-8:  64px;   /* tra-sezioni · hero padding mobile              */
  --sp-9:  96px;   /* hero padding desktop                           */

  /* ───────── LAYOUT / CONTAINER ────────────────────────────────────── */
  --container-max:  1240px;  /* larghezza contenuto desktop            */
  --grid-cols:      12;       /* griglia a 12 colonne                  */
  --grid-gutter:    24px;     /* gutter tra colonne (= --sp-5)         */
  --container-pad:  24px;     /* padding orizzontale desktop (--sp-5)  */
  --container-pad-m:16px;     /* padding orizzontale mobile (--sp-4)   */

  /* Breakpoint (per riferimento — usare nei @media, vedi sotto)
     XS  < 480     mobile piccolo
     SM  480–768   mobile / mobile landscape
     MD  768–1024  tablet
     LG  1024–1280 desktop
     XL  > 1280    desktop large                                       */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;

  /* ───────── RAGGI ─────────────────────────────────────────────────── */
  --r-0:    0;       /* sezioni full-bleed · linee                    */
  --r-sm:   4px;     /* tag · chip · badge                            */
  --r-md:   8px;     /* input · piccoli pulsanti                      */
  --r-lg:   14px;    /* card prodotto · card articolo · immagini      */
  --r-xl:   20px;    /* card hero · feature                           */
  --r-pill: 999px;   /* pulsanti · pill di stato                      */

  /* ───────── OMBRE ─────────────────────────────────────────────────── */
  --shadow-none:   none;
  --shadow-soft:   0 1px 2px rgba(31,26,20,.04), 0 8px 24px rgba(31,26,20,.06);  /* card default   */
  --shadow-raised: 0 2px 4px rgba(31,26,20,.06), 0 16px 36px rgba(31,26,20,.10); /* hover card     */
  --shadow-float:  0 4px 8px rgba(31,26,20,.08), 0 24px 56px rgba(31,26,20,.14); /* dropdown/popover*/

  /* ───────── MOTION ────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;
}

/* ════════════════════════════════════════════════════════════════════
   CLASSI TIPOGRAFICHE PRONTE
   Applicabili direttamente o da usare come riferimento per i selettori
   nativi WordPress/WooCommerce (h1, .price, ecc.). Mobile-first: i valori
   base sono desktop, l'override mobile sta nel media query in fondo.
   ════════════════════════════════════════════════════════════════════ */

.t-display { font-family: var(--font-serif); font-weight: var(--fw-medium);
  font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.t-h1 { font-family: var(--font-serif); font-weight: var(--fw-medium);
  font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.t-h2 { font-family: var(--font-serif); font-weight: var(--fw-medium);
  font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.t-h3 { font-family: var(--font-sans); font-weight: var(--fw-semibold);
  font-size: var(--fs-h3); line-height: var(--lh-h3); }
.t-h4 { font-family: var(--font-sans); font-weight: var(--fw-semibold);
  font-size: var(--fs-h4); line-height: var(--lh-h4); }
.t-body-l { font-family: var(--font-sans); font-weight: var(--fw-regular);
  font-size: var(--fs-body-l); line-height: var(--lh-body-l); }
.t-body { font-family: var(--font-sans); font-weight: var(--fw-regular);
  font-size: var(--fs-body); line-height: var(--lh-body); }
.t-small { font-family: var(--font-sans); font-weight: var(--fw-regular);
  font-size: var(--fs-small); line-height: var(--lh-small); color: var(--color-muted); }
.t-caps { font-family: var(--font-mono); font-weight: var(--fw-medium);
  font-size: var(--fs-caps); line-height: var(--lh-caps); letter-spacing: var(--ls-caps);
  text-transform: uppercase; color: var(--color-accent); }

/* Accento emotivo: parola in serif italic ambra dentro un titolo */
.t-accent-italic { font-family: var(--font-serif); font-style: italic; color: var(--color-accent); }

/* ───────── OVERRIDE MOBILE (≤ 768px) ───────── */
@media (max-width: 768px) {
  .t-display { font-size: var(--fs-display-m); letter-spacing: -1px; }
  .t-h1 { font-size: var(--fs-h1-m); }
  .t-h2 { font-size: var(--fs-h2-m); }
  .t-h3 { font-size: var(--fs-h3-m); }
  .t-h4 { font-size: var(--fs-h4-m); }
  .t-body-l { font-size: var(--fs-body-l-m); }
}