/* ═══════════════════════════════════════════
   CASA MARTELO — Design Tokens
   Proyecto web · Barcelon Sants · 2026
   ═══════════════════════════════════════════ */

:root {
  /* ── Paleta de color ─────────────────────── */
  --ink:          #0C0807;   /* fondo principal */
  --ink-2:        #160E0B;   /* fondo alternativo */
  --ink-deep:     #080504;   /* footer */

  --garnet:       #7C1626;   /* acento granate */
  --garnet-deep:  #3B0C13;   /* fondo bodega */

  --gold:         #CBA868;   /* oro principal */
  --gold-lt:      #EBDBB0;   /* oro claro */
  --gold-dim:     rgba(203,168,104,0.18);  /* oro tenue */

  --cream:        #F4EEE3;   /* texto principal */
  --cream-60:     rgba(244,238,227,0.60);
  --cream-40:     rgba(244,238,227,0.40);
  --cream-20:     rgba(244,238,227,0.20);
  --cream-07:     rgba(244,238,227,0.07);

  --muted:        rgba(244,238,227,0.42);

  /* ── Tipografía ──────────────────────────── */
  --font-serif:   'Bodoni Moda', Georgia, serif;
  --font-sans:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Tamaños de fuente (fluid) ───────────── */
  --text-hero:    clamp(56px, 8vw, 108px);
  --text-h1:      clamp(44px, 7vw, 88px);
  --text-h2:      clamp(34px, 5vw, 64px);
  --text-h3:      clamp(20px, 2.5vw, 28px);
  --text-section: clamp(32px, 4.5vw, 56px);
  --text-base:    14px;
  --text-sm:      13px;
  --text-xs:      11px;
  --text-label:   10px;

  /* ── Espaciado ───────────────────────────── */
  --sp-section:   100px;
  --sp-xl:        80px;
  --sp-lg:        56px;
  --sp-md:        40px;
  --sp-sm:        24px;
  --sp-xs:        16px;
  --sp-2xs:       8px;

  --pad-page:     56px;
  --max-w:        1200px;

  /* ── Transiciones ────────────────────────── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --duration:     0.9s;
  --duration-fast:0.35s;

  /* ── Bordes ──────────────────────────────── */
  --border-subtle:  1px solid var(--cream-07);
  --border-gold:    1px solid rgba(203,168,104,0.20);
  --border-gold-hover: 1px solid rgba(203,168,104,0.55);
  --radius-card:    2px;
}

@media (max-width: 820px) {
  :root {
    --pad-page:   24px;
    --sp-section: 72px;
    --sp-xl:      56px;
    --sp-lg:      36px;
  }
}