@font-face {
  font-family: 'Quantify';
  src: url('../fonts/Quantify.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Fondos */
  --bb-color-bg: #0E0E0E;
  --bb-color-surface-1: #111111;
  --bb-color-surface-2: #1A1A1A;
  --bb-color-surface-3: #2B2B2B;

  /* Texto — fondos oscuros (#0E0E0E / surfaces): primario y negritas en #FFF */
  --bb-color-text-primary: #FFFFFF;
  --bb-color-text-secondary: #CCCCCC;

  /* Acción */
  --bb-color-action: #BF1A24;
  --bb-color-action-hover: #E3262F;
  --bb-color-action-link-hover: #9A151D;

  /* Tipografía */
  --bb-font-heading: 'Saira', sans-serif;
  --bb-font-body: 'Inter', sans-serif;
  --bb-font-quantify: 'Quantify', 'Saira', sans-serif;

  /* Espaciado (base 8px) */
  --bb-space-1: 8px;
  --bb-space-2: 16px;
  --bb-space-3: 24px;
  --bb-space-eyebrow-title: 10px;
  --bb-space-4: 32px;
  --bb-space-5: 48px;
  --bb-space-6: 64px;
  --bb-space-7: 96px;

  /* Carruseles mobile — asoma el siguiente ítem (spec: mobile-carousel-peek.md) */
  --bb-carousel-mobile-peek: 4.75rem;

  /* Radios */
  --bb-radius-sm: 16px;
  --bb-radius-md: 24px;
  --bb-radius-lg: 32px;
  --bb-radius-pill: 9999px;

  /* Layout */
  --bb-header-height: 72px;
  --bb-header-offset-top: 20px;
  --bb-container-max: 1200px;

  /* Veredicto product picks (guías material) — ver product-pick.md */
  --bb-verdict-best: #22c55e;
  --bb-verdict-best-bg: rgba(34, 197, 94, 0.08);
  --bb-verdict-best-border: rgba(34, 197, 94, 0.45);
  --bb-verdict-alt: #f59e0b;
  --bb-verdict-alt-bg: rgba(245, 158, 11, 0.08);
  --bb-verdict-alt-border: rgba(245, 158, 11, 0.45);
  --bb-verdict-avoid: #ef4444;
  --bb-verdict-avoid-bg: rgba(239, 68, 68, 0.08);
  --bb-verdict-avoid-border: rgba(239, 68, 68, 0.45);

  /* Decathlon en product picks */
  --bb-store-decathlon-accent: #0037c2;
  --bb-store-decathlon-badge: #6eb0ff;
  --bb-store-decathlon-bg: rgba(0, 55, 194, 0.1);
  --bb-store-decathlon-border: rgba(0, 55, 194, 0.42);

  /* Liquid Glass — ver docs/design-system/liquid-glass.md */
  --bb-glass-bg: rgba(17, 17, 17, 0.72);
  --bb-glass-border: rgba(245, 245, 245, 0.08);
  --bb-glass-border-strong: rgba(255, 255, 255, 0.26);
  --bb-glass-blur: 40px;
  --bb-glass-blur-nav: 44px;
  --bb-glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    0 12px 40px rgba(0, 0, 0, 0.3);
  --bb-glass-gradient: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.04) 100%
  );
  --bb-glass-gradient-nav: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(255, 255, 255, 0.06) 100%
  );
  --bb-glass-gradient-nav-scrolled: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(14, 14, 14, 0.82) 100%
  );
  --bb-glass-gradient-scrolled: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(14, 14, 14, 0.88) 100%
  );
  --bb-glass-shadow-scrolled:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04),
    0 12px 40px rgba(0, 0, 0, 0.45);
  --bb-glass-gradient-action: linear-gradient(
    155deg,
    #E3262F 0%,
    #BF1A24 55%,
    #A0151E 100%
  );
  --bb-glass-gradient-action-hover: linear-gradient(
    155deg,
    #F03038 0%,
    #E3262F 55%,
    #BF1A24 100%
  );
  --bb-glass-highlight-action: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.24) 0%,
    rgba(255, 255, 255, 0.07) 38%,
    rgba(255, 255, 255, 0) 38%
  );
  --bb-glass-shadow-action:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  --bb-glass-shadow-action-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);

  /* Footer — rojo BKS oscuro fundido con el fondo de página (entrada tipo hero) */
  --bb-footer-bg-gradient: linear-gradient(
    180deg,
    var(--bb-color-bg) 0%,
    color-mix(in srgb, var(--bb-color-bg) 88%, #1a0909) 16%,
    color-mix(in srgb, var(--bb-color-bg) 45%, #1a0909) 36%,
    #1a0909 54%,
    #130606 72%,
    #000000 100%
  );
  --bb-footer-overlap: var(--bb-space-7);
}