/* ============================================================================
   Tokens del CHECKOUT del cliente — Magic & Sailing
   Superficie: front de compra (e-commerce de reserva). NO es el backoffice.
   Fuente: mockup Claude Design "Checkout Excursiones Magic and Sailing.html"
   Congelado por /diseno el 2026-08-14 (ADR-0010, análisis docs/analisis-checkout-front-rediseno.md).
   Casilla independiente: NO sustituye a ../tokens.css (tokens del form de Excursión del backoffice).

   Contrato: TODO valor visual del checkout se referencia con var(--token). Cero #hex/px
   sueltos en la UI implementada (M-004). Accesibilidad validada (WCAG 2.2 AA) — ver reglas
   de uso al pie y en guia-de-estilo.md.
   ============================================================================ */

:root {
  /* --- Color · marca / texto -------------------------------------------- */
  --c-primary:       #063B5C;  /* azul profundo · acción primaria (botones, énfasis) */
  --c-primary-h:     #0A5480;  /* hover de primario */
  --c-ink:           #062B45;  /* texto principal (14.6:1 sobre surface) */
  --c-ink-2:         #41607A;  /* texto secundario (6.6:1 sobre surface) */
  --c-ink-3:         #6C879C;  /* SOLO decorativo / texto grande — NO cuerpo (3.8:1) */

  /* --- Color · acento --------------------------------------------------- */
  --c-accent:        #0E7C86;  /* teal · acento (texto solo sobre surface/sand) */
  --c-accent-h:      #0A666E;  /* hover de acento */
  --c-accent-soft:   #DCF0F1;  /* fondo suave de acento (chips, avisos) */
  --c-accent-line:   #8FC9CD;  /* línea/realce de acento (decorativa) */

  /* --- Color · superficies ---------------------------------------------- */
  --c-sand:          #FCF4EA;  /* fondo cálido base */
  --c-sand-2:        #F6EADA;  /* fondo cálido 2 (secciones) */
  --c-surface:       #FFFFFF;  /* superficie (tarjetas, inputs) */
  --c-line:          #E4DACB;  /* borde/hairline (decorativo, ver regla A11Y-3) */
  --c-line-2:        #CFC2AE;  /* borde 2 (decorativo) */

  /* --- Color · estados -------------------------------------------------- */
  --c-ok:            #1C6B49;  --c-ok-soft:   #E4F2EA;  /* éxito (6.5:1 / 5.6:1) */
  --c-warn:          #8A5300;  --c-warn-soft: #FBEEDA;  /* aviso  (6.3:1 / 5.5:1) */
  --c-err:           #AE1F2D;  --c-err-soft:  #FBE9EA;  /* error  (6.9:1 / 5.9:1) */

  /* --- Foco ------------------------------------------------------------- */
  --c-ring:          #0A5480;  /* anillo de foco visible (8.1:1 sobre surface) */

  /* --- Tipografía ------------------------------------------------------- */
  --f-display: "Instrument Serif", Georgia, serif;      /* títulos (display) */
  --f-ui:      "Manrope", system-ui, sans-serif;        /* texto / UI */

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

  /* --- Espaciado (escala) ---------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* --- Sombras ---------------------------------------------------------- */
  --sh-1: 0 1px 2px  rgba(6, 43, 69, .06);
  --sh-2: 0 4px 14px rgba(6, 43, 69, .08);
  --sh-3: 0 12px 32px rgba(6, 43, 69, .12);

  /* --- Anchos de borde / foco (DERIVA CK01 · re-congelar en /diseno) -----
     El mockup no expone tokens de grosor; la implementación los necesita.
     Registrado como deriva M-004 (ver radiografia.md); pendiente de re-congelar. */
  --bd-hairline: 1px;   /* bordes/hairlines */
  --bd-strong:   2px;   /* separadores, subrayado del paso actual */
  --focus-w:     3px;   /* grosor del anillo de foco */
}

/* ============================================================================
   REGLAS DE USO validadas (WCAG 2.2 AA) — cumplir en /ciclo:
   A11Y-1  --c-ink-3 NO se usa como texto de cuerpo/funcional (3.2–3.8:1). Solo
           decorativo o texto grande (≥ 24px / ≥ 18.66px bold). Cuerpo → --c-ink / --c-ink-2.
   A11Y-2  --c-accent como TEXTO solo sobre --c-surface (4.95:1) o --c-sand (4.54:1);
           NO sobre --c-sand-2 (4.17:1 < 4.5). Como fondo de botón lleva texto blanco (4.95:1).
   A11Y-3  --c-line/--c-line-2/--c-accent-line son separadores DECORATIVOS (1.4–1.8:1):
           no pueden ser el ÚNICO identificador de un control. Los inputs necesitan label
           visible + anillo de foco (--c-ring, 8.1:1) y estado de error con --c-err (no solo color).
   FOCO    Todo control interactivo lleva foco visible con --c-ring (≥ 3:1 asegurado).
   TARGET  Objetivos táctiles ≥ 24×24 px (usar la escala --sp-* para padding).
   ============================================================================ */