/* tokens.css — sistema de diseño Café Valdore
   Los valores de color son EXACTAMENTE los ya usados en el sitio (auth.css:7-16,
   styles.css, productos.css, etc.) — no se introduce ni un solo color nuevo,
   solo se centralizan para reutilizarlos y agregar escalas de spacing/radius/sombra
   que hoy no existían. */
:root {
  /* --- Marca: café --- */
  --brand-brown: #231a11;
  --brown-mid: #2e2113;
  --brown-light: #3d2f1e;
  --brown-alt: #2F1B14;
  --saddle: #8B4513;
  --brown-text: #3E2723;

  /* --- Marca: dorado --- */
  --gold: #DAA520;
  --gold-dark: #b8860b;
  --gold-light: #ffed4e;

  /* --- Cremas de fondo --- */
  --cream-1: #f7f3ef;
  --cream-2: #e8ddd4;
  --cream-warm: #fff8e1;

  /* --- Semánticos (ya usados en el sitio) --- */
  --ok: #22c55e;
  --ok-dark: #16a34a;
  --warn: #f59e0b;
  --warn-dark: #ca8a04;
  --err: #ef4444;
  --err-dark: #dc2626;

  /* --- Espaciado --- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;

  /* --- Radios --- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* --- Sombras (tinte café, consistentes con el resto del sitio) --- */
  --shadow-sm: 0 1px 2px rgba(35, 26, 17, .08);
  --shadow-md: 0 4px 16px rgba(35, 26, 17, .10);
  --shadow-lg: 0 12px 32px rgba(35, 26, 17, .12);

  /* --- Movimiento --- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: 180ms;

  /* --- Tamaños de icono --- */
  --ic-sm: 18px;
  --ic-md: 20px;
  --ic-lg: 24px;

  /* --- Tipografía --- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
}

/* Jerarquía tipográfica: los títulos usan la serif display por defecto.
   Reglas más específicas de cada componente pueden seguir sobrescribiendo esto. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
}

/* Icono SVG: hereda color de texto (currentColor) y se alinea con el texto que acompaña */
.ic {
  width: var(--ic-md);
  height: var(--ic-md);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: middle;
}

.ic--sm { width: var(--ic-sm); height: var(--ic-sm); }
.ic--lg { width: var(--ic-lg); height: var(--ic-lg); }

/* Un icono dentro de un título escala con el tamaño de ese título, no con --ic-md fijo */
h1 .ic, h2 .ic, h3 .ic, h4 .ic {
  width: .85em;
  height: .85em;
}

/* Iconos que llevan relleno sólido (ej. corazón, sparkle) en vez de solo trazo */
.ic--fill {
  fill: currentColor;
  stroke: none;
}

/* Foco accesible consistente en toda la interfaz */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Icono de carga (usado en estados "Verificando...", "Cargando...") */
.ic--spin {
  animation: cv-spin 900ms linear infinite;
}

@keyframes cv-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ic--spin { animation: none; }
}