/* Tokens de marca de Cereal Killer. Los usan la tienda y el admin (/admin). */
@property --bite {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

:root {
  /* Colores (contrato) */
  --lima: #d2fa44;
  --negro: #12130e;
  --crema: #f8f6ee;
  --naranja: #f0660c;
  --gris: #a2a1a0;

  /* Derivados neutros: siempre de la misma paleta, sin gradientes */
  --negro-suave: #3a3b33;
  --crema-hundida: #efece0;
  --velo: rgb(18 19 14 / 0.62);

  /* Tipografía */
  --font-display: 'Anton', 'Impact', 'Haettenschweiler', 'Arial Narrow Bold', sans-serif;
  --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --fs-hero: clamp(4.4rem, 26vw, 12rem);
  --fs-section: clamp(2.6rem, 9.6vw, 5.6rem);
  --fs-product: clamp(1.9rem, 7.4vw, 2.5rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-lead: clamp(1.15rem, 3.6vw, 1.75rem);

  /* Espaciado y medidas */
  --gutter: clamp(1rem, 4.8vw, 4.75rem);
  --header-h: 4rem;
  --maxw: 1600px;
  --line: 1.5px;
  --hairline: 1px;
  --pill: 999px;

  /* Movimiento: rebote con actitud */
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 160ms;
  --t-med: 320ms;

  --focus: 3px solid var(--negro);
}

@media (min-width: 900px) {
  :root {
    --header-h: 4.75rem;
    /* Titular al costado de la foto: crece con el ancho pero no se la come */
    --fs-hero: clamp(7rem, 12.5vw, 12rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-med: 0ms;
  }
}