/* WEBFLASH · Brand Tokens v1
 * Importa este archivo en tu hoja principal:
 *   @import "tokens.css";
 * o referéncialo desde el HTML:
 *   <link rel="stylesheet" href="webflash-brand/tokens.css">
 */

:root {
  /* ── Color ──────────────────────────────────────── */
  --wf-ink:      #020617;     /* texto principal, fondos oscuros, símbolo */
  --wf-ink-2:    #0B1224;     /* tinta secundaria */
  --wf-lime:     #BEF264;     /* hero / acento eléctrico */
  --wf-lime-2:   #D9F99D;     /* lima suave (hovers, fondos sec.) */
  --wf-blue:     #3B82F6;     /* bullet del logo, links, acentos */
  --wf-blue-dk:  #1E40AF;     /* azul oscuro (estados activos) */
  --wf-white:    #FFFFFF;
  --wf-paper:    #F5F1EA;     /* neutro cálido */
  --wf-smoke:    rgba(2, 6, 23, 0.55);
  --wf-mist:     rgba(2, 6, 23, 0.10);

  /* ── Tipografía ─────────────────────────────────── */
  --wf-display: "Bowlby One", "Archivo Black", system-ui, sans-serif;
  --wf-sans:    "Space Grotesk", system-ui, -apple-system, sans-serif;
  --wf-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ── Radii ──────────────────────────────────────── */
  --wf-radius-pill:  999px;
  --wf-radius-card:  20px;
  --wf-radius-btn:   12px;
  --wf-radius-app:   40px;     /* app icons tipo iOS */

  /* ── Spacing scale ──────────────────────────────── */
  --wf-s-1: 4px;
  --wf-s-2: 8px;
  --wf-s-3: 12px;
  --wf-s-4: 16px;
  --wf-s-5: 24px;
  --wf-s-6: 32px;
  --wf-s-7: 48px;
  --wf-s-8: 64px;
  --wf-s-9: 96px;

  /* ── Shadows ────────────────────────────────────── */
  --wf-shadow-card: 0 12px 28px -12px rgba(2, 6, 23, 0.30);
  --wf-shadow-pop:  0 18px 40px -10px rgba(2, 6, 23, 0.35);
}

/* ── Helpers tipográficos ───────────────────────────── */
.wf-display {
  font-family: var(--wf-display);
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.85;
}
.wf-eyebrow {
  font-family: var(--wf-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11px;
  font-weight: 400;
}
.wf-tagline {
  font-family: var(--wf-mono);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 11px;
  color: var(--wf-smoke);
}
.wf-body {
  font-family: var(--wf-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--wf-ink);
}

/* ── Botones ────────────────────────────────────────── */
.wf-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--wf-sans);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 22px;
  border-radius: var(--wf-radius-pill);
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.wf-btn:hover { transform: translateY(-1px); }

.wf-btn-primary {
  background: var(--wf-ink);
  color: var(--wf-lime);
}
.wf-btn-primary:hover {
  box-shadow: 0 8px 20px -8px rgba(2, 6, 23, 0.5);
}

.wf-btn-secondary {
  background: transparent;
  color: var(--wf-ink);
  border: 1.5px solid var(--wf-ink);
}

.wf-btn-lime {
  background: var(--wf-lime);
  color: var(--wf-ink);
}

/* ── Surfaces ───────────────────────────────────────── */
.wf-surface-lime  { background: var(--wf-lime);  color: var(--wf-ink); }
.wf-surface-ink   { background: var(--wf-ink);   color: var(--wf-white); }
.wf-surface-paper { background: var(--wf-paper); color: var(--wf-ink); }
.wf-surface-blue  { background: var(--wf-blue);  color: var(--wf-white); }