:root {
  --color-carbon: #1c1c1c;
  --color-carbon-profundo: #121212;
  --color-oro-champagne: #f5db8b;
  --color-oro-hover: #e5c378;
  --color-oro-texto: #8a6a24;
  --color-blanco: #ffffff;
  --color-lienzo: #fafafa;
  --color-texto: #303030;
  --color-texto-secundario: #707070;
  --color-texto-sobre-oscuro: #d0d0d0;
  --color-borde: #e4e4e4;
  --color-linea-oro: rgb(245 219 139 / 25%);
  --color-foco-superficie-clara: #1c1c1c;
  --color-foco-superficie-oscura: #f5db8b;

  --fuente-principal: "Jost", system-ui, sans-serif;
  --ancho-contenedor: 1260px;
  --margen-lateral: clamp(1rem, 3vw, 1.5rem);
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-5: 1.5rem;
  --espacio-6: 2rem;
  --espacio-7: 3rem;
  --espacio-8: 5rem;

  --tracking-pequeno: 0.094rem;
  --tracking-medio: 0.125rem;
  --tracking-grande: 0.188rem;
  --tracking-marca: 0.25rem;
  --duracion-rapida: 160ms;
  --curva-salida: cubic-bezier(0.16, 1, 0.3, 1);
  --borde-foco: 2px solid var(--color-foco-superficie-clara);
  --sombra-cabecera: 0 4px 15px rgb(0 0 0 / 20%);
  --sombra-tarjeta: 0 10px 25px rgb(0 0 0 / 8%);
  --sombra-drawer: -10px 0 30px rgb(0 0 0 / 30%);
}