/* ============================================================
   VITTORIA FORNARI — Design Tokens
   variables.css
   ============================================================ */

:root {

  /* ── FONT FAMILIES ── */
  --font-serif:   'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Montserrat', sans-serif;
  --font-script:  'Qwitcher Grypen', cursive;

  /* ── FONT SIZES ── */
  --fs-xs:     11px;   /* label, meta, tag, eyebrow              */
  --fs-sm:     14px;   /* corpo testo secondario, excerpt        */
  --fs-base:   16px;   /* corpo testo principale                 */
  --fs-md:     18px;   /* sottotitoli, card title                */
  --fs-lg:     22px;   /* section headings secondari             */
  --fs-xl:     28px;   /* section headings principali            */
  --fs-2xl:    36px;   /* titoli di pagina                       */
  --fs-3xl:    52px;   /* display / hero                         */
  --fs-script: 40px;   /* font calligrafico (base — scalato con clamp sopra) */

  /* ── FONT WEIGHTS ── */
  --fw-thin:    200;
  --fw-light:   300;
  --fw-regular: 400;
  --fw-bold:    600;

  /* ── LETTER SPACING ── */
  --ls-tight:  0.05em;
  --ls-base:   0.1em;
  --ls-wide:   0.2em;
  --ls-wider:  0.3em;
  --ls-widest: 0.4em;

  /* ── COLORI BASE ── */
  --color-white:      #FFFFFF;
  --color-cream:      #FAF8F4;
  --color-greige-lt:  #EDE8E0;
  --color-greige:     #C4B8A8;
  --color-greige-warm:#C8B8A0;  /* greige caldo — foto-sx hero, about-preview, wave (introdotto da vf-patch) */
  --color-sage:       #B8C0A8;  /* verde salvia — foto-dx hero e relativa fascia wave */
  --color-greige-md:  #B0A090;
  --color-khaki:      #7A7058;
  --color-gold:       #B09A6A;
  --color-bg:         #F0EBE3;

  /* ── COLORI TESTO ── */
  --color-text-dark:  #2E2A22;
  --color-text-mid:   #6A635A;
  --color-text-light: #9A9280;
  --color-text-white: #fafaf8;

  /* ── COLORI TEMATICI ── */
  --color-yoga:    hsl(142, 13%, 61%);
  --color-tao:     #7A8C98;
  --color-tibet:   #B07A5A;
  --color-cabala:  #6A6888;
  --color-celtica:  #5A7A68;

  /* ── SPAZIATURE ── */
  --space-xs:   8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  60px;
  --space-2xl: 80px;

  /* ── LAYOUT ── */
  --max-width:        1100px;
  --max-width-text:    680px;
  --max-width-narrow:  520px;

  /* ── BORDI & RAGGI ── */
  --border-color: var(--color-greige-lt);
  --border:       1px solid var(--border-color);
  --radius:       2px;

  /* ── OMBRE ── */
  --shadow-sm: 0 2px 12px rgba(0,0,0,.06);
  --shadow-md: 0 8px 32px rgba(0,0,0,.08);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.12);

  /* ── TRANSIZIONI ── */
  --transition-fast: .15s ease;
  --transition-base: .25s ease;
  --transition-slow: .4s ease;

  /* ── NAVBAR ── */
  --navbar-height: 80px;
  --drawer-width:  300px;
  /* Altezza fissa della barra lingua: serve al site-header sticky
     (top negativo su mobile = la barra scorre via, la navbar resta) */
  --langbar-h: 34px;
  /* Altezza dell'header compatto desktop (34 brand · ~59 menu+tradizioni):
     offset sticky per breadcrumb, barra progresso e sidebar. La barra
     progresso ora è FUORI dall'header (+4px da sommare a parte). */
  --header-compact-h: 93px;
}