/* tokens.css — R&P Enterprise · escrito por P2 (sistema de diseño), 2026-11-13.
   Estos NOMBRES son el contrato: base.css y todas las secciones usan solo estas variables.
   Página blanca con la tinta negra del logo. El color lo ponen el atardecer del hero y las fotos.
   Contrastes medidos (WCAG 2.x) anotados al lado; el detalle está en 02-sistema-diseno.md. */
:root {
  /* color: un fondo, una tinta, un acento (+ campos y superficies por escalón de tono) */
  --color-fondo: #ffffff;
  --color-superficie: #f5f3f7;     /* escalón neutro (tarjetas del carrito, marcos): casi gris, un punto violeta */
  --color-campo: #f1ecf8;          /* campo CLARO para una sección que cambia de fondo (lavanda muy pálido). Nada oscuro. */
  --color-sobre-campo: #15121a;    /* 15,97:1 sobre campo */
  --color-tinta: #15121a;          /* negro del logo, apenas violeta · 18,53:1 sobre fondo · 16,81:1 sobre superficie */
  --color-tinta-suave: #565060;    /* solo notas secundarias, nunca el texto corrido · 7,74:1 fondo · 6,67:1 campo */
  --color-acento: #553c8f;         /* morado de la mesa de corte · 8,64:1 como texto sobre fondo · 7,45:1 sobre campo */
  --color-sobre-acento: #ffffff;   /* 8,64:1 sobre acento */
  --color-error: #b3261e;          /* 6,54:1 fondo · 5,63:1 campo */
  --color-ok: #1b6b3f;             /* 6,52:1 fondo · 5,62:1 campo (verde profundo de estado, no es el de WhatsApp) */
  --color-foco: #553c8f;           /* 8,64:1 sobre fondo · 5,38:1 sobre el punto más oscuro del cielo */

  /* tipografía (máx. 2 familias): Gabarito 800 (display) + Work Sans 400/600 (texto) */
  --font-display: "Gabarito", "Century Gothic", "Trebuchet MS", system-ui, sans-serif;
  --font-texto: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --peso-display: 800;
  --tracking-display: -0.02em;
  --leading-display: 1.04;          /* deja sitio a tildes y eñes en titulares de dos líneas */
  --leading-texto: 1.6;
  /* escala fluida entre 390 px y 1440 px de ancho (mínimo = celular) */
  --paso--1: clamp(0.875rem, 0.852rem + 0.095vw, 0.9375rem);   /* 14 → 15 px · notas, etiquetas */
  --paso-0: clamp(1rem, 0.954rem + 0.19vw, 1.125rem);          /* 16 → 18 px · texto y botones */
  --paso-1: clamp(1.25rem, 1.157rem + 0.381vw, 1.5rem);        /* 20 → 24 px · entradilla, nombre de producto */
  --paso-2: clamp(1.625rem, 1.3rem + 1.333vw, 2.5rem);         /* 26 → 40 px · título de categoría */
  --paso-3: clamp(2.125rem, 1.336rem + 3.238vw, 4.25rem);      /* 34 → 68 px · titular del hero y de «Tu pedido» */
  --paso-4: clamp(2.75rem, 1.171rem + 6.476vw, 7rem);          /* 44 → 112 px · palabra gigante, una por página */

  /* espacio, retícula y forma */
  --margen: clamp(1.25rem, 0.786rem + 1.905vw, 2.5rem);        /* 20 → 40 px */
  --ancho-max: 80rem;
  --medida: 60ch;
  --espacio-1: 0.5rem;
  --espacio-2: 1rem;
  --espacio-3: 1.5rem;
  --espacio-4: 2.5rem;
  --espacio-5: 4rem;
  --espacio-seccion: clamp(4.5rem, 3.2rem + 5.333vw, 8rem);    /* 72 → 128 px */
  --radio: 0;                       /* el papel se corta recto: fotos, tarjetas y visor sin redondeo */
  --radio-boton: 999px;             /* lo que se toca es redondo: botones, contador − / +, botón flotante */

  /* movimiento: lento y con espera (perfil de Reinaldo) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-1: 200ms;
  --dur-2: 360ms;
  --dur-3: 900ms;
  --reveal-dist: 20px;
  --reveal-paso: 90ms;

  /* ── añadidas por P2 (no están en el contrato de base.css) ───────────────────────────── */

  /* líneas y bordes */
  --color-linea: #e4e0ea;           /* filete decorativo (1,30:1): separa, no informa */
  --color-borde-control: #857e90;   /* borde de controles (contador, campos): 3,90:1 fondo · 3,36:1 campo */

  /* WhatsApp: SOLO en botones que abren WhatsApp. Blanco sobre #25D366 da 1,98:1 (no pasa): el texto va oscuro. */
  --wa: #25d366;
  --sobre-wa: #0b2415;              /* 8,29:1 sobre --wa */
  --wa-pulsado: #1ebe5a;            /* hover / pulsado · --sobre-wa da 6,71:1 */

  /* cielo del hero: atardecer claro, de arriba (cenit) abajo (horizonte) */
  --cielo-1: #d9cef4;               /* lavanda · negro 14,09:1 */
  --cielo-2: #f0cbe4;               /* rosa lila · negro 14,37:1 */
  --cielo-3: #ffcfc6;               /* rosa durazno · negro 14,99:1 */
  --cielo-4: #ffd9b0;               /* durazno · negro 15,80:1 */
  --cielo-5: #fff0c2;               /* amarillo mantequilla · negro 18,50:1 */
  --sol: #fff8de;                   /* disco del sol, más claro que el cielo · negro 19,73:1 */
  --sol-halo: #ffbe98;              /* resplandor coral: el punto MÁS OSCURO del cielo · negro 13,07:1 · tinta 11,53:1 */
  --cielo-degradado: linear-gradient(180deg,
      var(--cielo-1) 0%, var(--cielo-2) 24%, var(--cielo-3) 46%,
      var(--cielo-4) 66%, var(--cielo-5) 86%, var(--color-fondo) 100%);

  /* movimiento del hero */
  --dur-telon: 1800ms;              /* E1: el cielo baja como telón */
  --dur-viento: 18s;                /* E2: una vuelta del bucle de semillas (lento, con espera) */
}