/*
 * tokens.css — fuente de verdad de los tokens de color del tema.
 *
 * Los mismos valores están en theme.json (para el editor de bloques). Este archivo
 * los expone como custom properties para el CSS propio del tema.
 *
 * ⚠️ Si tocas un color, ejecuta ANTES de commitear:
 *      node scripts/check-contrast-tokens.mjs
 *    Sale != 0 si rompes un par crítico. Ya cazó tres fallos reales una vez.
 *
 * Reglas del oro (ver context/design-system.md §1):
 *   1. Nunca --color-gold como texto pequeño sobre claro   (2,04:1)
 *   2. Nunca texto blanco/crema sobre --color-gold          (2,11:1)
 *   3. Nunca --color-gold como foco o icono funcional       (2,04:1 < 3:1 WCAG 1.4.11)
 */

:root {
  /* Neutros */
  --color-bg: #FCFBF8;
  --color-surface: #FFFFFF;
  --color-bg-warm: #F6F2EA;
  --color-ink: #14120F;
  --color-text-muted: #6B6459;

  /* Oro de marca — medido sobre el logo original del cliente */
  --color-gold: #E6A809;
  --color-gold-deep: #D89D07;
  --color-gold-text: #8A6300;

  /* Líneas y bordes */
  --color-line: #E9E4DA;           /* decorativo: separadores. Sin requisito de contraste */
  --color-border-field: #8E8676;   /* funcional: bordes de campos. 3,49:1 — obligado ≥3:1 */
  --color-focus: #8A6300;          /* anillo de foco. 5,25:1 sobre lienzo */

  /* Banda oscura */
  --color-ink-deep: #1B1813;
  --color-on-dark: #F6F2E9;
  --color-muted-dark: #B9AE9C;

  /* WhatsApp — el verde de marca #25D366 no da contraste con texto blanco */
  --color-whatsapp: #0F7A6E;

  /* Degradado de banda: ambos extremos verificados contra la tinta (8,88 y 7,79) */
  --gradient-gold-band: linear-gradient(135deg, #E6A809 0%, #D89D07 100%);

  /* Radios */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-full: 999px;

  /* Elevación cálida — nunca sombra negra pura sobre lienzo cálido */
  --shadow-rest: 0 1px 2px rgba(20, 18, 15, .04), 0 4px 12px rgba(20, 18, 15, .05);
  --shadow-hover: 0 2px 4px rgba(20, 18, 15, .05), 0 12px 28px rgba(20, 18, 15, .09);

  /* Motion */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 180ms;
  --dur: 400ms;
}

/* ── Foco visible ───────────────────────────────────────────────────────── */

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

/* Dentro de la banda dorada el foco se invierte a tinta: el oro sobre oro no se ve */
.band-gold :focus-visible {
  outline-color: var(--color-ink);
}

/* ── Banda dorada a sangre ──────────────────────────────────────────────── */

/*
 * Máximo 2 por página (hero + tarifas). Más y el sistema degenera en la
 * dirección B: fatiga cromática y peor legibilidad. Ver design-system.md §6.
 */
.band-gold {
  /* Plano SÓLIDO, no degradado: la imagen del hero viene compuesta sobre este
     mismo color, así la unión entre foto y sección es invisible. Con degradado
     la costura se veía, porque el ángulo de la imagen y el de la banda no
     coinciden cuando cambian de tamaño. */
  background: var(--color-gold);
  color: var(--color-ink);
  border-radius: 0; /* va a sangre, de borde a borde */
}

.band-gold .btn-primary {
  background: var(--color-ink);
  color: var(--color-on-dark);
}

.band-dark {
  background: var(--color-ink-deep);
  color: var(--color-on-dark);
}

.band-dark .gold {
  color: var(--color-gold); /* 8,40:1 — aquí el oro SÍ puede ser texto */
}

/* ── Reducción de movimiento ────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}