/* ========================================================================
   VOLEIBOLEANDO — Design Tokens
   Identidad "Playful Ball" — naranja + azul eléctrico
   ======================================================================== */

:root {
  /* ─── Paleta ─────────────────────────────────────────────────────── */
  --vb-orange: #F25C2B;        /* primario — pelota + acento "eando" */
  --vb-orange-hover: #DB4E20;  /* hover/active del primario */
  --vb-orange-soft: #FFE9DF;   /* fondos suaves, badges */

  --vb-blue: #2E4BFF;          /* secundario — wordmark principal "voleibol" */
  --vb-blue-hover: #2038E2;
  --vb-blue-soft: #E4E8FF;

  --vb-yellow: #FFD23F;        /* acento terciario — highlights, stickers alt */
  --vb-ink: #1A1530;           /* texto oscuro / base UI */
  --vb-ink-soft: #334;         /* texto secundario */

  --vb-bone: #FFF8EE;          /* fondo cálido principal */
  --vb-bone-dark: #F4EEE0;     /* fondo cálido alterno */
  --vb-white: #FFFFFF;

  --vb-gray-100: #F6F5F1;
  --vb-gray-200: #E8E6DF;
  --vb-gray-400: #A8A396;
  --vb-gray-600: #6B6758;

  /* ─── Semánticos ─────────────────────────────────────────────────── */
  --vb-success: #3AA655;
  --vb-warning: #E89924;
  --vb-danger:  #D6372E;

  /* ─── Tipografía ─────────────────────────────────────────────────── */
  --vb-font-display: 'Bricolage Grotesque', 'Inter', system-ui, -apple-system, sans-serif;
  --vb-font-body:    'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  --vb-font-mono:    'DM Mono', ui-monospace, 'SF Mono', monospace;
  --vb-font-accent:  'Archivo', system-ui, sans-serif;  /* para stickers y detalles */

  --vb-weight-regular: 400;
  --vb-weight-medium:  500;
  --vb-weight-bold:    700;
  --vb-weight-black:   800;

  /* ─── Tamaños ─────────────────────────────────────────────────────── */
  --vb-text-xs:   12px;
  --vb-text-sm:   14px;
  --vb-text-base: 16px;
  --vb-text-lg:   18px;
  --vb-text-xl:   22px;
  --vb-text-2xl:  28px;
  --vb-text-3xl:  36px;
  --vb-text-4xl:  48px;
  --vb-text-5xl:  64px;

  /* ─── Espaciado ──────────────────────────────────────────────────── */
  --vb-space-1: 4px;
  --vb-space-2: 8px;
  --vb-space-3: 12px;
  --vb-space-4: 16px;
  --vb-space-5: 24px;
  --vb-space-6: 32px;
  --vb-space-8: 48px;
  --vb-space-10: 64px;
  --vb-space-12: 96px;

  /* ─── Border radius ──────────────────────────────────────────────── */
  --vb-radius-sm: 6px;
  --vb-radius-md: 12px;
  --vb-radius-lg: 20px;
  --vb-radius-xl: 32px;
  --vb-radius-full: 9999px;

  /* ─── Sombras ────────────────────────────────────────────────────── */
  --vb-shadow-sm: 0 1px 2px rgba(26, 21, 48, 0.05);
  --vb-shadow-md: 0 4px 12px rgba(26, 21, 48, 0.08);
  --vb-shadow-lg: 0 12px 32px rgba(26, 21, 48, 0.12);
  --vb-shadow-pop: 0 8px 0 var(--vb-ink); /* sombra "plana" estilo neobrutalismo suave */

  /* ─── Transiciones ───────────────────────────────────────────────── */
  --vb-ease: cubic-bezier(0.2, 0.9, 0.3, 1);
  --vb-dur-fast: 150ms;
  --vb-dur-base: 250ms;
  --vb-dur-slow: 400ms;
}