/* ============================================================
   Club Las Arenas — Brand Tokens
   Pega este bloque al inicio de tu CSS o impórtalo como módulo.
   ============================================================ */

:root {
  /* ── Color: brand ─────────────────────────────────────── */
  --color-cream: #FCFAF5;          /* fondo base, cálido */
  --color-cream-deep: #F2EDE2;     /* fondo secundario, tarjetas sobre crema */
  --color-ink: #2A2A2A;            /* tinta principal: texto, titulares */
  --color-ink-soft: #6B6B6B;       /* texto secundario, captions */
  --color-yellow: #FFCC00;         /* acento de marca: CTAs, datos clave */
  --color-yellow-deep: #E6B800;    /* hover state del amarillo */
  --color-black-deep: #1A1A1A;     /* secciones oscuras, footer */

  /* ── Color: utilidad ──────────────────────────────────── */
  --color-line: #E5E0D5;           /* bordes y divisores sobre crema */
  --color-line-dark: rgba(252, 250, 245, 0.15);  /* bordes sobre negro */

  /* ── Tipografía ───────────────────────────────────────── */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── Escala tipográfica ──────────────────────────────── */
  --fs-xs: 0.75rem;       /* 12px — eyebrow, labels */
  --fs-sm: 0.875rem;      /* 14px — captions, footer */
  --fs-base: 1rem;        /* 16px — body */
  --fs-md: 1.125rem;      /* 18px — body destacado */
  --fs-lg: 1.5rem;        /* 24px — h3 */
  --fs-xl: 2rem;          /* 32px — h2 */
  --fs-2xl: clamp(2.5rem, 5vw, 4rem);   /* h1 sección */
  --fs-hero: clamp(3rem, 8vw, 6rem);    /* h1 hero */

  /* ── Espacios ─────────────────────────────────────────── */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  /* ── Layout ───────────────────────────────────────────── */
  --max-width: 1280px;
  --gutter: clamp(1.5rem, 4vw, 4rem);
  --section-padding: clamp(4rem, 8vw, 6rem);

  /* ── Radios ───────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ── Transiciones ─────────────────────────────────────── */
  --transition-fast: 0.18s ease;
  --transition-base: 0.3s ease;
}