/* ══════════════════════════════════════════════════════════════════
   DESIGN.CSS — Identidad visual de Martillo Clásico
   Hereda del sistema FG (fulgarza.com) con adición automotriz.

   ┌─ CÓMO CAMBIAR LA PALETA ────────────────────────────────────┐
   │  Edita los valores de las variables en :root                │
   │  El resto del sitio se actualiza solo — no toques otros CSS │
   └─────────────────────────────────────────────────────────────┘
   ┌─ CÓMO CAMBIAR TIPOGRAFÍA ───────────────────────────────────┐
   │  Edita --font-base y las variables --text-*                 │
   └─────────────────────────────────────────────────────────────┘
══════════════════════════════════════════════════════════════════ */

:root {

  /* ── Paleta base — secciones claras ───────────────────────── */
  --bg:            #FAFAF7;
  --surface:       #FFFFFF;
  --text:          #141414;
  --text-muted:    #6B6B6B;
  --text-subtle:   #9A9A9A;
  --border:        #E8E8E3;

  /* ── Acento principal — lavanda FG ────────────────────────── */
  --accent:        #6B7290;
  --accent-hover:  #515771;

  /* ── Acento secundario — gold automotriz (Martillo Clásico) ─ */
  --gold:          #C9A84C;   /* precio actual, countdown, montos de impacto */
  --gold-hover:    #8B6F2E;
  --gold-muted:    rgba(201, 168, 76, 0.15);

  /* ── Secciones oscuras ────────────────────────────────────── */
  --dark-bg:       #0A0A0A;
  --dark-bg-2:     #141418;
  --dark-surface:  #1C1C22;
  --dark-text:     #F5F5F0;
  --dark-muted:    #BEC2D6;
  --dark-subtle:   #7A7A8A;
  --dark-border:   #2A2A30;

  /* ── Tipografía ───────────────────────────────────────────── */
  --font-base:       'Inter', system-ui, -apple-system, sans-serif;
  --text-hero:       clamp(2.5rem,  5vw,  4.5rem);
  --text-h2:         clamp(1.875rem, 4vw, 3rem);
  --text-h3:         clamp(1.125rem, 2vw, 1.375rem);
  --text-body:       1.0625rem;
  --text-small:      0.875rem;
  --text-xs:         0.75rem;
  --text-eyebrow:    0.6875rem;
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --leading:         1.7;
  --leading-tight:   1.25;
  --tracking-tight:  -0.02em;
  --tracking-wide:   0.25em;
  --tracking-wider:  0.15em;

  /* ── Espaciado / Layout ───────────────────────────────────── */
  --section-gap:   clamp(5rem, 10vw, 8rem);
  --section-pad:   clamp(4rem, 8vw,  6.5rem);
  --container:     72rem;
  --container-sm:  52rem;
  --prose-max:     65ch;
  --gap:           clamp(1rem, 2vw, 1.5rem);
  --radius:        0.5rem;
  --radius-lg:     1rem;

  /* ── Animaciones ──────────────────────────────────────────── */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration:      0.28s;
  --duration-md:   0.45s;
  --duration-slow: 0.9s;
  --duration-xslow:1.2s;

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:     0 16px 48px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.08);
  --shadow-gold:   0 0 32px rgba(201, 168, 76, 0.25);

  /* ── Z-index stack ────────────────────────────────────────── */
  --z-base:   1;
  --z-raised: 10;
  --z-header: 100;
  --z-modal:  200;
  --z-toast:  300;
}