/* ============================================================
   Shio Gourmet · Tokens de diseño (CSS Custom Properties)
   Valores globales que se repiten en varias partes del sitio.
   Se carga antes que styles.min.css en las 6 páginas.

   Nota: la paleta de marca ya existía en styles.min.css como
   variables --bs-* (p. ej. --bs-primary-1 = rosa #FF61A7,
   --bs-secondary-1 / --bs-text-1 = tinta #283139, --bs-white).
   Este archivo agrega los tokens que faltaban; se reutilizan
   los --bs-* existentes antes de crear nombres nuevos.
   ============================================================ */

:root {
  /* --- Colores del sitio --- */
  --color-fondo: #f8f6f3;      /* fondo crema del body y del footer */
  --color-negro: #000;
  --color-gris: #666666;
  --color-borde: #dee2e6;      /* bordes de tablas y divisores */
  --color-oro: #e7a701;        /* ciclo de sabores y selector */
  --color-rojo: #ff5258;
  --color-magenta: #b54ba3;
  --color-limon: #feff4d;      /* frasco 5 */
  --color-celeste: #b5e6ff;    /* frasco 1 */
  --color-niebla: #d0e4ee;     /* frasco 8 */
  --color-pizarra: #5d6d79;    /* frasco 9 */
  --color-bronce: #a87431;     /* color fijo del ciclo (sin animación) */
  --color-hover-secundario: #3d4854; /* hover del botón secundario */

  /* --- Canales de color para rgba(...) --- */
  --rgb-negro: 0, 0, 0;
  --rgb-blanco: 255, 255, 255;
  --rgb-tinta: 40, 49, 57;

  /* --- Tipografía --- */
  --texto-chico: 0.875rem;     /* 14px en rem */
  --texto-cuerpo: 0.875em;     /* texto chico relativo al padre */
  --texto-medio: 1.25rem;      /* 20px */
  --texto-base: 1rem;          /* 16px */
  --peso-fino: 300;
  --peso-normal: 400;
  --peso-medio: 600;
  --peso-negro: 700;
  --interlineado-cuerpo: 1.5;
  --interlineado-titulos: 1.2;
  --interlineado-uno: 1;
  --espaciado-letras: 0.1em;

  /* --- Bordes redondeados --- */
  --radio-base: 0.25rem;
  --radio-chico: 0.2rem;
  --radio-medio: 0.3rem;
  --radio-grande: 1rem;
  --radio-pastilla: 999px;
  --radio-circulo: 50%;
  --radio-sup: 4px 4px 0 0;    /* esquinas superiores */
  --radio-inf: 0 0 4px 4px;    /* esquinas inferiores */

  /* --- Espaciados (escala usada por las utilidades del sitio) --- */
  --espacio-1: 0.25rem;        /* 4px */
  --espacio-2: 0.5rem;         /* 8px */
  --espacio-btn-y: 0.375rem;   /* 6px, padding vertical de botones */
  --espacio-btn-x: 0.75rem;    /* 12px, padding horizontal de botones */
  --espacio-3: 1rem;           /* 16px */
  --espacio-4: 1.5rem;         /* 24px */
  --espacio-5: 3rem;           /* 48px */
  --espacio-6: 3.75rem;        /* 60px */
  --espacio-7: 5rem;           /* 80px */
  --espacio-8: 7.5rem;         /* 120px */

  /* --- Sombras --- */
  --sombra-alta: 0 0.5rem 1rem rgba(var(--rgb-negro), 0.15);

  /* --- Transiciones y ciclos --- */
  --transicion-rapida: 0.15s ease-in-out;
  --transicion-suave: 0.15s ease;
  --transicion-media: 0.3s ease;
  --ciclo-sabores: 18s;        /* duración compartida del ciclo de colores */

  /* --- Medidas sueltas compartidas --- */
  --marco-alto: 20rem;         /* altura de los marcos decorativos */
}