/* =============================================================================
   tokens.css — Sistema de diseño compartido BWAY
   =============================================================================
   Fuente única de verdad de la marca. Lo comparten bwayprod.vip y bwayx.
   La "paleta sagrada" y las tres tipografías NO se tocan sin aprobación:
   son lo que hace que los dos sitios se lean como hermanos.

   bwayX hereda TODO esto y solo cambia el ritmo (ver styles.css):
   más grid, más mono, movimiento preciso en vez de fílmico.
   ============================================================================= */

:root {
  /* ── Paleta sagrada ─────────────────────────────────────────────────────── */
  --bw-gold:        #f4d68a;
  --bw-gold-deep:   #d4a854;
  --bw-gold-light:  #fbe9bd;
  --bw-cream:       #f3ead3;
  --bw-onyx:        #0a0805;

  /* Neutrales derivados del onyx (no son grises puros: llevan el tinte cálido) */
  --bw-ink-1:       #12100b;
  --bw-ink-2:       #1a1710;
  --bw-ink-3:       #241f16;

  /* ── Alphas del oro ─────────────────────────────────────────────────────── */
  --bw-gold-a08:    rgba(244, 214, 138, 0.08);
  --bw-gold-a14:    rgba(244, 214, 138, 0.14);
  --bw-gold-a22:    rgba(244, 214, 138, 0.22);
  --bw-gold-a32:    rgba(244, 214, 138, 0.32);
  --bw-gold-a60:    rgba(244, 214, 138, 0.60);

  /* ── Alphas del cream (texto) ───────────────────────────────────────────── */
  --bw-cream-a40:   rgba(243, 234, 211, 0.40);
  --bw-cream-a55:   rgba(243, 234, 211, 0.55);
  --bw-cream-a72:   rgba(243, 234, 211, 0.72);
  --bw-cream-a88:   rgba(243, 234, 211, 0.88);

  /* ── Tipografía ─────────────────────────────────────────────────────────── */
  --bw-font-display: 'Fraunces', Georgia, serif;
  --bw-font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --bw-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ── Easings ────────────────────────────────────────────────────────────── */
  --bw-ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --bw-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Ritmo espacial ─────────────────────────────────────────────────────── */
  --bw-space-section: clamp(80px, 11vh, 160px);
  --bw-maxw:          1240px;
  --bw-gutter:        clamp(20px, 5vw, 64px);

  /* ── Radios ─────────────────────────────────────────────────────────────── */
  --bw-radius-sm: 10px;
  --bw-radius:    14px;
  --bw-radius-lg: 20px;
}