/* ============================================================
   BOCACHE FOR EQUESTRIAN — DESIGN TOKENS V2
   "Equestrian Editorial Luxury" — vedi DESIGN-V2.md per il
   razionale di ogni decisione. Fonte unica di verità: nessun
   valore di colore/tipografia/spaziatura va scritto altrove
   come letterale, sempre tramite questi custom properties.
   ============================================================ */
:root {
  /* ---------- Superfici scure (alternate per dare ritmo) ---------- */
  --color-ink: #0d0c0a;         /* nero caldo — hero overlay, superficie primaria */
  --color-carbon: #17140f;      /* carbone profondo — sezioni scure secondarie */
  --color-carbon-2: #221e16;    /* superficie scura elevata (card su fondo scuro) */
  --color-midnight: #11161e;    /* blu notte — variazione di ritmo */
  --color-midnight-2: #1a212b;
  --color-forest: #10140e;      /* verde bosco scurissimo — variazione di ritmo */
  --color-forest-2: #1a2018;
  --color-line-dark: #3a3226;   /* bordi su fondo scuro */

  /* ---------- Superfici chiare ---------- */
  --color-ivory: #f6f1e6;       /* avorio — superficie chiara primaria */
  --color-parchment: #efe4cd;   /* pergamena — superficie chiara secondaria/card */
  --color-white: #fffdf8;
  --color-sand: #ddccA6;        /* sabbia — bordi/accenti su chiaro */
  --color-line-light: #ddd2ba;

  /* ---------- Accenti materici ---------- */
  --color-leather: #8a5a3b;     /* cuoio */
  --color-chestnut: #4f3020;    /* castagna */
  --color-champagne: #cdb37f;   /* champagne — accento primario */
  --color-champagne-light: #e0cda1;
  --color-burnished: #a07f45;   /* oro brunito — accento secondario/hover */

  /* ---------- Testo ---------- */
  --color-text: #f1ece0;
  --color-text-muted: #a89d89;
  --color-text-on-light: #211a12;
  --color-text-on-light-muted: #6b5f4c;

  /* ---------- Semantici ---------- */
  --color-success: #5c7a52;
  --color-success-bg: #182018;
  --color-error: #a4503d;
  --color-error-bg: #271916;
  --color-focus: var(--color-champagne);

  /* ---------- Tipografia ---------- */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-hero: clamp(2.75rem, 6vw, 5.75rem);       /* 44–92px */
  --fs-display-1: clamp(2.25rem, 4.4vw, 4.5rem);  /* 36–72px */
  --fs-display-2: clamp(1.85rem, 3.2vw, 3.5rem);  /* 30–56px */
  --fs-product-title: clamp(1.9rem, 2.7vw, 3.15rem); /* 30–50px */
  --fs-price: 1.375rem;      /* 22px */
  --fs-body-lg: 1.0625rem;   /* 17px */
  --fs-body: 1rem;           /* 16px */
  --fs-body-sm: 0.9375rem;
  --fs-nav: 0.9rem;          /* 14.4px */
  --fs-label: 0.75rem;       /* 12px */
  --fs-eyebrow: var(--fs-label);

  /* ---------- Spaziatura (scala 4/8/12/16/24/32/48/64/96/128/160) ---------- */
  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4rem;      /* 64 */
  --space-9: 6rem;      /* 96 */
  --space-10: 8rem;     /* 128 */
  --space-11: 10rem;    /* 160 */

  /* ---------- Raggi ---------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;

  /* ---------- Ombre (diffuse, materiche) ---------- */
  --shadow-card: 0 12px 32px -12px rgba(13, 12, 10, 0.4);
  --shadow-lift: 0 24px 56px -16px rgba(13, 12, 10, 0.45);
  --shadow-modal: 0 32px 80px -16px rgba(13, 12, 10, 0.6);

  /* ---------- Layout ---------- */
  --container-max: 1480px;
  --container-pad: 1.25rem;
  --header-h: 84px;

  /* ---------- Transizioni ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 450ms;
}

@media (min-width: 48rem) {
  :root { --container-pad: 2.5rem; }
}
@media (min-width: 90rem) {
  :root { --container-pad: 3.5rem; --container-max: 1600px; }
}

/* ---------- Alias di compatibilità v1 → v2 ----------
   Il redesign procede per fasi (v. DESIGN-V2.md): alcuni file CSS e alcuni
   markup generati da JS (account, checkout, conferma ordine...) referenziano
   ancora i nomi dei token v1. Questi alias garantiscono che, finché non
   vengono migrati fase per fase, ricevano comunque la nuova palette invece
   di una custom property inesistente — nessuna pagina resta "vecchia a
   metà" con colori rotti nel frattempo. Rimuovere un alias solo dopo aver
   verificato che nessun file lo referenzia più (`grep -r` sul nome v1). */
:root {
  --color-charcoal: var(--color-carbon);
  --color-charcoal-2: var(--color-carbon-2);
  --color-line: var(--color-line-dark);
  --color-gold: var(--color-champagne);
  --color-gold-light: var(--color-champagne-light);
  --color-gold-dark: var(--color-burnished);
}