/* ═══════════════════════════════════════════
   Club Sintético — Design tokens
   Fuente única de verdad: colores, tipografía,
   espaciado, layout y efectos.
   ═══════════════════════════════════════════ */

:root {
  /* ── Paleta ── */
  --color-bg:          #EFE9DC;  /* beige crema de fondo */
  --color-ink:         #111111;  /* negro titulares */
  --color-ink-soft:    #2A2A2A;  /* negro cuerpo */
  --color-accent:      #E89B2E;  /* naranja CTA / nav activo */
  --color-accent-deep: #C47820;  /* naranja hover */
  --color-green:       #7A9B3E;  /* verde socio */
  --color-green-deep:  #5F7C2E;  /* verde hover */
  --color-line:        #1A1A1A;  /* líneas separadoras */
  --color-muted:       #6B6B6B;  /* texto secundario */
  --color-card:        #FFFFFF;  /* cards blancas sobre beige */
  --color-footer:      #0A0A0A;  /* footer negro */
  --color-highlight:   #FFEB3B;  /* amarillo marcador notas */

  /* ── Tipografía ── */
  --font-display: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Pesos disponibles self-hosteados */
  --fw-light:   300;   /* subtítulo hero, notas sutiles */
  --fw-regular: 400;   /* cuerpo, párrafos */
  --fw-medium:  500;   /* nav, botones, énfasis UI */
  --fw-bold:    800;   /* H1, H2, H3, wordmark, hora agenda */

  /* Escalas fluidas — responsive sin media queries */
  --fs-hero:    clamp(3rem, 8vw + 1rem, 7rem);
  --fs-h1:      clamp(2.25rem, 4vw + 1rem, 4rem);
  --fs-h2:      clamp(1.75rem, 2vw + 1rem, 2.75rem);
  --fs-h3:      clamp(1.25rem, 1vw + 1rem, 1.75rem);
  --fs-lead:    clamp(1rem, 0.5vw + 0.9rem, 1.25rem);
  --fs-body:    1.3125rem;   /* 21pt del Figma ≈ 21px */
  --fs-small:   0.875rem;

  /* ── Espaciado (escala 4, en rem) ── */
  --sp-1:  0.25rem;   /*  4px */
  --sp-2:  0.5rem;    /*  8px */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */
  --sp-24: 6rem;      /* 96px */

  /* ── Layout ── */
  --container:    min(1120px, 92vw);
  --container-sm: min(720px, 92vw);
  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    20px;
  --radius-pill:  999px;

  /* ── Efectos ── */
  --shadow-card: 0 2px 0 var(--color-line);   /* offset plano tipo fanzine */
  --border-card: 2px solid var(--color-line);
  --transition:  180ms ease-out;
}