/* ============================================================
   LIVING MAGGIOLINA — DESIGN TOKENS
   Unico punto di verità per colore, tipografia, spazio, ritmo.
   Modificare qui si propaga a tutto il sito.
   ============================================================ */

/* ---------- Font self-hosted (variabili, subset latino) ----- */
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-normal-latin.woff2') format('woff2');
  font-weight: 200 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-normal-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Colore -------------------------------------- */
  /* Derivato dai render: intonaco avorio, legno rovere, greige,
     marmo caldo, ombre tabacco. Il verde salvia resta nelle
     immagini e non entra nell'interfaccia. */
  --color-bg:          #F5F1E9;  /* avorio caldo, fondo primario  */
  --color-bg-alt:      #EBE4D8;  /* crema/greige, fasce alternate */
  --color-surface:     #FCFAF6;  /* campo chiaro, form e pannelli */
  --color-text:        #2A2520;  /* charcoal caldo   13.5:1 su bg */
  --color-text-muted:  #6E6459;  /* taupe             5.1:1 su bg */
  --color-accent:      #7A6140;  /* bronzo spento     5.2:1 su bg */
  --color-border:      #DCD3C4;  /* filo, 1px                     */

  /* Fondo scuro (hero, lightbox, fasce di respiro) */
  --color-deep:            #1F1B16;
  --color-text-on-deep:    #F5F1E9;  /* 15.2:1 */
  --color-muted-on-deep:   #A89C8A;  /*  6.4:1 */
  --color-accent-on-deep:  #C9A87A;  /*  7.6:1 */
  --color-border-on-deep:  rgba(245, 241, 233, 0.18);

  --color-selection:   rgba(122, 97, 64, 0.16);

  /* ---------- Tipografia ---------------------------------- */
  --font-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --font-sans:    'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Scala fluida 320 → 1440. Display max 5.5rem (88px). */
  --text-2xs: 0.6875rem;                              /* 11px  indici */
  --text-xs:  0.75rem;                                /* 12px  label  */
  --text-sm:  0.8125rem;                              /* 13px         */
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-md:  clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-lg:  clamp(1.25rem, 1.13rem + 0.55vw, 1.5rem);
  --text-xl:  clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem);
  --text-2xl: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1.7rem + 3.9vw, 4.5rem);
  --text-4xl: clamp(2.75rem, 1.6rem + 5.6vw, 5.5rem);

  --leading-tight: 1.04;
  --leading-snug:  1.16;
  --leading-body:  1.62;

  --tracking-display: -0.025em;
  --tracking-tight:   -0.012em;
  --tracking-label:    0.19em;   /* maiuscoletto spaziato */
  --tracking-mark:     0.22em;   /* wordmark              */

  --measure: 64ch;               /* misura di lettura del body */

  /* ---------- Spazio -------------------------------------- */
  --sp-3xs: 0.25rem;   --sp-2xs: 0.5rem;   --sp-xs: 0.75rem;
  --sp-sm:  1rem;      --sp-md:  1.5rem;   --sp-lg: 2rem;
  --sp-xl:  3rem;      --sp-2xl: 4rem;     --sp-3xl: 6rem;
  --sp-4xl: 8rem;      --sp-5xl: 11rem;

  /* Respiro verticale fra le sezioni: il "ritmo lento" */
  --section-y:     clamp(5.5rem, 11vw, 11rem);
  --section-y-lg:  clamp(6rem, 11vw, 11.5rem);

  /* ---------- Griglia ------------------------------------- */
  --container:  1440px;
  --gutter:     clamp(1.25rem, 5vw, 5.5rem);
  --grid-gap:   clamp(1rem, 2vw, 2rem);

  /* ---------- Filo e raggio ------------------------------- */
  --hairline: 1px;
  --radius:   0px;          /* nessun raggio: registro architettonico */
  --radius-sm: 2px;

  /* ---------- Ombra --------------------------------------- */
  /* Offset reale + blur morbido, mai alone a offset zero. */
  --shadow-sm: 0 2px 6px rgba(42, 37, 32, 0.06),
               0 8px 24px rgba(42, 37, 32, 0.05);
  --shadow-md: 0 6px 16px rgba(42, 37, 32, 0.08),
               0 24px 56px rgba(42, 37, 32, 0.09);
  --shadow-lg: 0 12px 32px rgba(42, 37, 32, 0.10),
               0 40px 96px rgba(42, 37, 32, 0.14);

  /* ---------- Movimento ----------------------------------- */
  --ease:      cubic-bezier(0.16, 1, 0.30, 1);   /* ease-out esponenziale */
  --ease-soft: cubic-bezier(0.32, 0.72, 0.28, 1);
  --dur-xs:  180ms;
  --dur-sm:  320ms;
  --dur-md:  560ms;
  --dur-lg:  900ms;

  /* ---------- Layer --------------------------------------- */
  --z-header:   100;
  --z-mobile-cta: 120;
  --z-menu:     200;
  --z-lightbox: 300;

  --header-h: 5.25rem;

  /* Larghezza della scrollbar, misurata a runtime */
  --sbw: 0px;
}

@media (max-width: 899px) {
  :root { --header-h: 4.25rem; }
}